--- title: "How to Create a Side Mega Menu in Elementor?" url: https://theplusaddons.com/docs/create-a-side-mega-menu-in-elementor/ date: 2023-10-27 modified: 2026-09-11 lang: en author: "Aditya Sharma" description: "Do you want a mega menu that opens from the side? A side mega menu keeps your categories in a column and opens a wide panel next to it, which..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Create-a-Side-Mega-Menu-in-Elementor_-1024x536.jpg word_count: 536 --- # How to Create a Side Mega Menu in Elementor? ## - The Plus Addons for Elementor Navigation Menu widget combines a Vertical Side Menu with Plus Mega Menu panels, and the post says it is part of The Plus Addons for Elementor Pro. - Open Direction controls where the panel appears: Left opens panels to the right of the menu, while Right opens them to the left. - A 1140px container with a 240px menu produces an 880px panel when Container or Full Width is used, because the panel fills the remaining container width minus 20px. Do you want a mega menu that opens from the side? A side mega menu keeps your categories in a column and opens a wide panel next to it, which suits shops with many product groups. With the Navigation Menu widget from The Plus Addons for Elementor, you combine a Vertical Side Menu with Plus Mega Menu panels. *To check the complete feature overview documentation of The Plus Addons for Elementor Navigation Menu widget, [click here](https://theplusaddons.com/docs/navigation-menu-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/navigation-menu/?utm_source=tpae&utm_medium=docs&utm_campaign=text) Table Of Contents ## Before You Start - **Edition:** **Pro** — the Navigation Menu widget is part of The Plus Addons for Elementor Pro. The free **Navigation Menu Lite** widget does not have this option.- **Widget to enable:** Navigation Menu, switched on under **The Plus Addons > Widgets**.- **A WordPress menu** under **Appearance > Menus**, if you use the **Default** menu type. ## Step 1: Build the mega menu Create the Plus Mega Menu panels and the WordPress menu as in [how to create a mega menu](https://theplusaddons.com/docs/create-a-mega-menu-in-elementor/). For a panel that fills the space next to the menu, set the parent item’s **Mega menu Type** to **Container** or **Full Width**. ## Step 2: Choose Vertical Side Menu Add the Navigation Menu widget to a sidebar, page or template. In **Layout**, keep **Menu Type** on **Default**. **Menu Direction** is a row of three pictures — **Horizontal Menu**, **Vertical Menu** and **Vertical Side Menu**, in that order. Hover over a picture to see its name. Choose the third one, **Vertical Side Menu**. ## Step 3: Set the direction and pick the menu In **Content**, pick your mega menu in **Select Menu**. Set **Open Direction** to the side of the page your menu sits on: **Left** (default) opens panels to the right of the menu, **Right** opens them to the left. ![Open Direction in the Content section of a Vertical Side Menu](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-open-direction.webp) ## Step 4: Set up the title bar **Vertical Side Title Bar** (on by default) adds a bar above the menu. **Title Bar Hover/Click** keeps the menu always open (**Normal**), opens it on **Hover**, or toggles it on **Click**. Change the text in **Title**, add a **Title Link**, and add **Prefix Icon** and **Postfix Icon**. That’s it, now you’ll have a side mega menu. ![A mega menu panel opening beside a vertical side menu](https://theplusaddons.com/wp-content/uploads/2026/09/navigation-menu-result-side-mega.webp) ## How Wide Is the Panel? With **Container** or **Full Width**, the panel fills the rest of the container: the container’s content width, minus the menu’s width, minus 20px. So a 1140px container with a 240px menu gives an 880px panel. The width is recalculated when the window is resized. ## Limitations - **Pro only.** Navigation Menu Lite has no Vertical Side Menu, and Plus Mega Menu comes with the Pro plugin.- **The menu needs a boxed container.** The panel width is taken from the container’s inner (boxed) width.- **Check the mobile menu.** On narrow screens, visitors get the mobile menu instead, with the panel content inside it. ## Troubleshooting ### The panel opens off the screen Set **Open Direction** to the side the menu is on. ### The panel is narrower than expected The panel is limited to the width of the container the widget sits in. Widen that container, or its content width. ## Related Docs - [Create a side menu](https://theplusaddons.com/docs/create-a-side-menu-in-elementor/)- [Create a mega menu](https://theplusaddons.com/docs/create-a-mega-menu-in-elementor/)- [Create a vertical mega menu](https://theplusaddons.com/docs/create-a-vertical-mega-menu-in-elementor/) ## Frequently Asked Questions **Q: What do I need before creating a side mega menu in Elementor?** A: The setup depends on the Pro version of The Plus Addons for Elementor, because the Navigation Menu widget’s Vertical Side Menu option is part of the Pro plugin. You also need the Navigation Menu widget switched on under The Plus Addons > Widgets, plus a WordPress menu in Appearance > Menus if you are using the Default menu type. That matters because the side mega menu is built from a normal WordPress menu plus Plus Mega Menu panels. **Q: How do I make the mega menu panel open beside the menu instead of below it?** A: The panel opens beside the menu when Open Direction matches the side where the menu sits. Left opens panels to the right of the menu, while Right opens them to the left. That direction choice is what keeps the panel from spilling off-screen on the wrong side. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses this setting with Vertical Side Menu layouts. **Q: What kind of container works best for a side mega menu panel?** A: A boxed container is required, because the panel width is taken from the container’s inner boxed width. For a panel that fills the available space next to the menu, set the parent item’s Mega menu Type to Container or Full Width. That setup matters because it lets the panel stretch across the remaining space instead of staying cramped inside a smaller area. **Q: Why is my side mega menu panel opening off the screen?** A: That usually happens when Open Direction does not match the side where the menu is placed. If the menu sits on the left, Open Direction should be Left so panels open to the right. If it sits on the right, use Right so panels open to the left. The direction setting is doing more than styling here, it controls where the whole panel expands. **Q: Why is my side mega menu narrower than I expected?** A: The panel width is limited by the container that holds the widget, and The Plus Addons for Elementor calculates it from that container’s inner width. With Container or Full Width, it uses container content width minus menu width minus 20px, so a 1140px container with a 240px menu gives an 880px panel. If it feels tight, widen that container or its content width. **Q: Does a side mega menu work well on mobile screens?** A: On narrow screens, visitors get the mobile menu instead of the side panel layout, and the panel content appears inside that mobile menu. That is an important limitation because it means the desktop side-panel behavior does not carry over unchanged to small screens. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH keeps this behavior tied to screen size rather than forcing a cramped desktop layout.