V4 Elements WP Menu Estimated reading: 7 minutes 5 views Show your WordPress menu anywhere on your page. It gets dropdowns for sub-items, a vertical layout, and a mobile menu that slides in on small screens. You pick the colors and the look, no code needed. WIDGET WP Menu USES Any menu from Appearance > Menus PLAN Free A QUICK LOOK What You Will Build A clean menu with soft pill hovers and a rounded dropdown. Point at About or Services and the sub-menu opens. Point at a menu item and its dropdown opens BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: Make your menu first. Go to Appearance > Menus, create a menu and add your pages. To make a dropdown, drag an item a little to the right, under another item. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the WP Menu is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find WP Menu under Header & Footer Widgets and switch it on. Click Save Settings. The WP Menu card in your dashboard (click to zoom) Note: Do not mix it up with Nav. This page is about the WP Menu widget. STEP 2 Add It to Your Page Open a page or your header template in the Elementor Editor and drop the menu in. Click the + button at the top left to open the Elements panel. Look under AAE General for WP Menu. Drag it onto your page. The WP Menu in the Elements panel (click to zoom) Tip: Can not see it? Type WP Menu in the search box at the top of the panel. Note: A new WP Menu shows the message Please select a menu until you choose one in the next step. STEP 3 Choose Your Menu Open the Content section in the General tab. Click the Select Menu box. Pick the menu you made in Appearance > Menus. Your menu shows up right away. Select Menu (1) (click to zoom) Tip: You changed your menu in WordPress? Reload the Elementor Editor to see the new list. STEP 4 Pick the Layout Open the Layout section. Choose Horizontal for a header, or Vertical for a sidebar or a footer list. Use Alignment to place the menu in its row. It is Center by default. Keep Mobile Hamburger on to get a menu button on small screens. Set the Mobile Breakpoint (px). Below this width, the menu turns into the button. The default is 768. Layout (1), Alignment (2), Mobile Hamburger and Mobile Breakpoint (3) (click to zoom) Tip: Set the breakpoint to 0 if you never want the mobile menu. STEP 5 Style the Menu Items Open Menu Items Style. This is where you give the menu its colors and spacing. Set the Text Color for every item. Set the Hover Text Color and the Hover Background for the pointer effect. A light color with a round Item Radius gives a soft pill. Set the Active Color for the page the visitor is on now. Change the Padding, the Item Gap and the Item Radius to make items roomier or tighter. Text Color (1), Hover colors (2) and Active Color (3) (click to zoom) Tip: In the picture below, the text is dark slate, the hover color is orange #f05a35, the hover background is a soft peach #fff1ec and the Item Radius is 999 for a pill. STEP 6 Style the Dropdown Items that have sub-items show a small arrow. Their sub-menu opens as a floating box. You style that box in two sections. Open Dropdown Panel to style the floating box: Open On (Hover or Click), the Background, the Padding, the Min Width, the Border Radius and the Border. Open Dropdown Items to style the rows inside the box: Text Color, Hover Background and Hover Text Color, the Padding and the Gap. Open Sub-menu Toggle if you want your own arrow icons instead of the built-in chevron. Open On (1), Background (2) and Min Width with Border Radius (3) (click to zoom) Tip: Choose Open On > Click if you want the dropdown to open only when someone clicks. It also works better on touch screens. RESULT Final Result A plain menu in the default look. The default look With the style from Step 5 and Step 6 Pill hover, orange text, and a rounded white dropdown. The styled menu with the About dropdown open MORE LAYOUTS Vertical Menu Set Layout to Vertical for a sidebar or a footer. Each item with sub-items gets a + button. Click it to open the sub-items, and click again to close them. The vertical menu, closed and open MOBILE Mobile Menu Below the Mobile Breakpoint, the menu becomes a button. A tap slides the menu in from the side. You can style the button in Hamburger, the top of the panel in Drawer Header, and the panel itself in Drawer. The menu button, and the menu that slides in Hamburger The button: icon color, background, size, radius and border. Drawer Header A logo or a label (default Menu) at the top of the panel, with a close button. Drawer The panel: width (default 320), background, overlay color and border. MOTION Choose the Animation Open Motion to set how things move. Transition Duration (ms): how long the animation takes. The default is 250. Mobile Drawer Effect: Slide from Left (default), Slide from Right, Slide from Top, Slide from Bottom, Fade, Scale, Zoom In or Flip. Sub-menu Dropdown Effect: Slide Down (default), Fade, Slide + Fade, Scale (Origin), Zoom or Flip. Transition Duration (1), Mobile Drawer Effect (2) and Sub-menu Dropdown Effect (3) (click to zoom) SETTINGS Options Select Menu The WordPress menu to show. Layout Default: HorizontalHorizontal or Vertical. Alignment Default: CenterWhere the menu sits in its row. Mobile Hamburger Default: OnShows a menu button on small screens. Mobile Breakpoint (px) Default: 768Below this width, the mobile menu shows. 0 means never. Open On Default: HoverHow dropdowns open: Hover or Click. Dropdown Min Width (px) Default: 220The smallest width of the dropdown box. Drawer Label Default: MenuThe title at the top of the mobile panel. Drawer Width (px) Default: 320The width of the mobile panel. Transition Duration (ms) Default: 250The speed of the animations. ID Optional CSS ID for the menu. GOOD TO KNOW More Details Edit once, update everywhere The menu comes from WordPress. Add or rename an item in Appearance > Menus and every WP Menu that uses it changes. The current page The page the visitor is on is shown in the Active Color. Many menus Add as many WP Menus as you like, for example one in the header and one in the footer. Vertical menus In a vertical menu, sub-items always open from the + button. HELP Troubleshooting I do not see the WP Menu in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on WP Menu. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. It says Please select a menu Open the Content section and choose a menu in Select Menu. If the list is empty, make a menu first in Appearance > Menus. My new menu is not in the list Reload the Elementor Editor. The list is read when the editor opens. My dropdown does not open Check that the item has sub-items in Appearance > Menus. A sub-item is an item that sits a little to the right, under another item. I see the menu button on my desktop Your Mobile Breakpoint is bigger than your screen. Lower it in the Layout section. The text is the wrong size or font Select the menu and open the Style tab. Use Typography to set the size and the font. You Did It Your page now has a menu that looks good on every screen. If you face any problem, please contact our support team. We are happy to help.
