V4 Elements Nav Estimated reading: 9 minutes 2 views Build a menu for your header, one item at a time. Add dropdowns, pick a hover animation, and get a mobile menu that slides in on small screens. Every item is a box, so you can style it any way you like. No code needed. WIDGET Nav PARTS Nav, Nav Items and a Mobile Nav PLAN Free A QUICK LOOK What You Will Build A clean menu with soft pill hovers and rounded dropdowns. Point at About or Services and the dropdown 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: Not sure whether to use Nav or WP Menu? Use WP Menu to show a WordPress menu as it is. Use Nav when you want to build the menu item by item and style each one. You can also import a WordPress menu into Nav. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Nav 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 Nav under Header & Footer Widgets and switch it on. Click Save Settings. The Nav card in your dashboard (click to zoom) 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. Type Nav in the search box. Drag the Nav with the orange badge onto your page. The Nav in the Elements panel (click to zoom) Note: A new Nav comes with four placeholder items named Menu Item 1 to Menu Item 4. You will replace them in the next step. STEP 3 Add Your Menu Items Open the Menu Items section in the General tab. You have two ways to fill your menu. Type them yourself. Click + Add main item to add an item. Or import a WordPress menu. Pick your menu in the box, then click Import. Your items and sub-items come over, in the same order. Delete the placeholder Menu Item rows you do not need. Click the x on a row. Auto-sync (1), Add main item (2), Import (3) and the item list (4) (click to zoom) Note: Import adds your WordPress items after the ones already there. Delete the four placeholder items first, or after you import. Tip: Drag a row up or down to change the order. Drag it right to put it under the item above (a sub-item). Drag it left to bring it back out. Click any row to open it and edit it. Type the words in Title. Paste the address in Link. Switch Dropdown Content on if this item should open a dropdown. Title (1), Link (2) and Dropdown Content (3) (click to zoom) Tip: Using Import? Turn on Auto-sync from WordPress. The Nav then updates its items from your WordPress menu each time you open the editor. The Update button does the same thing right now. Your styling stays. STEP 4 Set Up the Dropdowns Select an item that has a dropdown. In the Structure panel it is an item with a small arrow. Open its Settings. Keep Enable Dropdown on for items that open a dropdown. Choose the Trigger: Click (default) or Hover. Choose a Dropdown Animation. To change the sub-items, open Sub-menu Items below. Enable Dropdown (1), Trigger (2), Dropdown Animation (3) and Sub-menu Items (4) (click to zoom) Note: With Click, an item that also has a real link will open the dropdown and go to that link. For a parent item, either leave its link empty, or choose Hover. In WordPress, a Custom Link with only # imports with no link. Note: The six Dropdown Animation choices are Default (GSAP), Grow Down, Rotate 3D, Grow Out, Slide Items and Rotate Items. Try each one on your live page and keep the one you like. Tip: The dropdown is a normal box. Its sub-items are Nav Items too. You can click the dropdown box in the Structure panel and style it like any other box. STEP 5 Style It Every Nav Item is a box. Select an item and open the Style tab. Open Typography for the font size, the weight and the color. Open Spacing to add padding, for example 8 top and bottom and 18 left and right. Open Border and set a big radius, for example 999, to make a pill. Switch the style state from Normal to Hover. Then set a text color and a background. They show only when someone points at the item. Do the same for each item. Then select the dropdown box and give it a white Background, some Spacing, a rounded Border and a soft shadow in Effects. Spacing (1), Typography (2), Background (3) and Border (4) (click to zoom) Note: Set the dropdown box to Direction: Column in Layout. Otherwise its sub-items can sit side by side in the mobile menu, and only the first one shows. Tip: The result below uses text #334155, hover text #f05a35 and hover background #fff1ec. STEP 6 Change the Dropdown Arrow Items with a dropdown show a small arrow next to their words. Open Dropdown Icon to change it. Keep Show Icon on Dropdown Items on, or switch it off to hide the arrows. Click the Icon box to choose your own icon. Set the Icon Size (px) and the Gap from Label (px). Choose the icon color for Normal, Hover and Open. For Open, you can also set a Rotation (deg). Show Icon (1), Icon (2) and Icon Size (3) (click to zoom) STEP 7 Turn On the Mobile Menu On small screens, the Nav can become a menu button. A tap opens a panel with your items. Open Mobile Menu. Switch Enable Mobile Menu on. A Mobile Nav appears next to your Nav in the Structure panel. Choose the Breakpoint. Below this width, the menu button shows. The default is Mobile (767px). Choose the Drawer Position: Right (default) or Left. Keep Close on Link Click on to close the panel after a tap on a link. Keep Lock Body Scroll on so the page does not move behind the panel. Change the Hamburger Icon, Close Icon, Dropdown Icon or Back Icon if you want. Enable Mobile Menu (1), Breakpoint and Drawer Position (2), Close on Link Click and Lock Body Scroll (3) (click to zoom) Tip: Switch on Open Mobile Menu (Editor) to see the panel in the editor. Switch it off when you are done. Open the Structure panel. Your Nav now has a partner, the Mobile Nav. Click it to style the menu button and the panel, like any other box. The Nav (1) and the Mobile Nav (2) (click to zoom) RESULT Final Result The styled menu on a live page, with the About dropdown open. The finished menu with the About dropdown open On a phone The menu button, the open panel, and a sub-menu. A small arrow opens the sub-menu, and the back button comes back. The menu button, the open menu and a sub-menu SETTINGS Options Auto-sync from WordPress Default: OffUpdates the items from your WordPress menu when you open the editor. Title / Link The words and the address of one item. Enable Dropdown Default: OffGives the item a dropdown. Trigger Default: ClickClick or Hover. Dropdown Animation Default: Default (GSAP)Six ways to open a dropdown. Show Icon on Dropdown Items Default: OnThe small arrow. Enable Mobile Menu Default: OffAdds the Mobile Nav. Breakpoint Default: Mobile (767px)Below this width, the menu button shows. Drawer Position Default: RightRight or Left. Close on Link Click Default: OnCloses the panel after a tap on a link. Lock Body Scroll Default: OnThe page stays still while the panel is open. ID Optional CSS ID. GOOD TO KNOW More Details Keyboard friendly You can move through the menu with the arrow keys. The page you are on If an item links to the page the visitor is on, the Nav marks that item for you. Import adds, it does not replace If you import twice, you get the items twice. Many menus Add a Nav to your header and another to your footer. HELP Troubleshooting I do not see the Nav in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Nav. Click Save Settings, then reload the editor. Type Nav in the search box and pick the one with the orange badge. Clicking a parent item takes me to another page With Trigger: Click, an item with a real link opens its dropdown and also goes to the link. Remove the link from the parent item, or choose Hover. My sub-items sit side by side on mobile Select the dropdown box in the Structure panel. In the Style tab, open Layout and set the Direction to Column. I changed my WordPress menu but the Nav did not change Open the Nav, go to Menu Items and click Update. Or switch on Auto-sync from WordPress. The menu button looks odd or has a strange color Select the Mobile Nav in the Structure panel and style the button in the Style tab. Your theme may add its own button style. I see the menu button on my desktop Your Breakpoint is bigger than your screen. Choose a smaller one in Mobile Menu. You Did It Your page now has a menu that you built and styled yourself, on desktop and on mobile. If you face any problem, please contact our support team. We are happy to help.
