Table of Contents
In this WPDesigns article, I will look at and help you with WordPress menus in Elementor. In short, a menu is a set of links that point to key areas of a website and allow quick, easy, and obvious navigation to defined areas of the website. They are usually shown as a horizontal bar that spans across the top of the website pages; this bar follows most of the site but is often missing on cart and checkout pages to improve conversion rates. Menus will provide details of the pages on the website and often show the website’s hierarchy.
If your website has been created with Elementor, you can adjust and change the menu as you’d like and develop some great and unique layouts. If you have a more standard WordPress theme, then most themes can offer you various choices for creating menus that can be viewed in various locations.
How to Add Items to Your WordPress Menu
After that, you can choose the menu items you’d like to add; these could be anything from standard pages, product categories, tags, blog post categories, and custom links. There are many other menu items possible, but we’ll stick with these for now as they cover most use cases. The first thing you’ll likely add to the menu will be pages; these are fairly straight forwards.
You can select the menu items from the box on the left of the screen and scroll through to find what you’re looking for; if you cannot see it, then it is worth checking at the top of the page under “screen options” to make sure the type of thing you are looking for has been enabled. Once you have found what you need, you can click the checkboxes of the pages you’d like.
You can add as many menu items as you like into your menu, but they will likely need to be moved around to gain some hierarchy and organization on the site; otherwise, there will be too many items on the top line, and it will become unclear and crowded.
How to Move Menu Items
To manage the order of menu items, click and hold the item that you’d like to move, then drag and drop it where you’d like. Once you’ve added in what you need, you can hit save to save the menu.
How to Create a Dropdown Menu
When creating your menu, it is likely to have several layers. Any of the navigational menus that are nested into another menu are known as Drop Down Menus. When you hover over the main menu item, and menu items that are below will “drop-down.” Navigation menus of parent and child menu elements are known as drop-down menus or nesting menus. When you hover your cursor over a parent item, a sub-menu will appear underneath it for all child items.
To create a dropdown menu, drag a child item below the parent item, then drag it to the right slightly.
How to Add Custom Links Into the Menu
You can easily add custom links to your menu. Custom links can be used to connect to anything that has a URL address; this could be a web page, another website, or perhaps a PDF document in your media library.
You’ll need to use the Menu screen ‘Custom Links’ tab. Paste the link into your menu along with the text you want to use. After that, choose the add menu button.
How to Add Categories Into the Menu
By selecting the Categories tab on the Menus page’s left side, you can quickly add categories to your menu. To see all of your categories, you need to press the ‘View All’ button.
Press the ‘Add to Menu’ button after selecting the categories you want to use in the menu.
Customizing Menu Items
Navigation Label – The title of the item in your custom menu is set in this field. Your visitors will see this when they visit your website/blog.
Move – You can move the menu item by choosing options from here.
Original – Link to the menu item’s original source (e.g. a link to view the post or page).
Remove – If you want to remove the item click on remove and it will delete from the menu.
Cancel – If you want to stop editing a menu item click on cancel.
How to Delete a Menu Item
If you would like to remove/delete any item from your menu using the menu editor, you’ll need to find the menu item you wish to delete. In the top right corner of the item/box menu, press the arrow icon to extend it, click on Remove. You will then have immediately deleted the menu item/box. To update the changes and confirm the deletion – click the Save Menu button.
How to Add Custom Navigation Menus in Elementor
To add a navigation menu with Elementor, go to Dashboard>Templates > Theme Builders > Add New/or select an existing header template.
On the Elementor page, you can choose “Nav Menu” from the widget list or select the Nav widget if you already have it on the page. You will need to choose a pre-existing menu from the list to give WordPress something to show in the widget. If you don’t have one, you can use the instructions above to create it. Once you have added your nav widget, you will be able to change and edit it much as you can with the other widgets using the Content, Style, and Advanced tabs.
You can also repeat this method to add a menu where ever you need it, some people add them into the footer, and they can also be used for the categories on a blog archive page.
- Menu: Here, you can see the list of the menus that have been created and that are ready to use.
- Layout: From here, you can choose a Horizontal, Vertical, or Dropdown layout for the menu. There are benefits to each of these, but the most commonly used is the horizontal menu layout which is standard across web design and the internet.
- Align: Here, you can set the menu item alignment, either Left, Center, Right, or Stretch.
- Pointer: You can set a pointer for your menu, either None, Underline, Double Line, Framed, Background, or Text. This will dictate how it looks when the mouse hovers over the menu text.
- Animation: This is the animation box for the pointer, either Fade, Slide, Grow, Drop-In, Drop Out, or None. You can set whatever you like; it can worth experimenting to find the one that best suits your site. You can always adjust this later if you change your mind.
- Submenu Indicator: If you have any submenu or drop-down menu, this is the little icon to the side of it that dictates a submenu available. You can change the icon style from here, either None, Classic, Chevron, Angle, or Plus.
- Breakpoint: Here you can select the point at which your standard desktop menu will change and turn into a mobile menu. The breakpoint that you set will be dictated by the size of the screen viewing it, once the screen size passes the limit it will become a mobile menu.
When setting the breakpoint you will get three options which are Mobile (< 768), Tablet (< 1025) or None. When you will select none it will not break the menu and it will maintain the full menu no matter the size of the screen, this can bring issues as the screen shrinks but the text stays long and inline.
- Full Width: The full width option dictates the size of the menu on the screen and whether it is allowed to break out of the column it is in. Generally making sure the mobile menu is displayed at full width will resolve any issues that come with extra columns – if it is not full width, it can looked squished. It is worth checking this option and checking how the menu looks.
- Align: Here you can choose whether the mobile menu items are displayed on the left, or in the center, by selecting either Aside or Center.
- Toggle Button: You have the option here to show the Hamburger icon as the toggle button or not. It is likely that you will want to show the icon rather than not.
- Toggle Align: Here you can set the alignment of the toggle button like left, center and right. You can also refine the alignment using the padding in the advanced tab.
- Typography: You can set the menu typography from here like font-family, font-size, transform, style, etc.
- Normal, Hover and Active are all states that your menu will take under different conditions (when you hover over with your mouse!) You can choose the text color and the various colors of hover and active. If you have chosen to have a pointer in the content tab, you can style it here.
- Pointer Width: Control the width of the pointer beneath you.
- Horizontal Padding: You can set horizontally padding around the text of the menu items.
- Vertical Padding: Set the vertical padding around the text of your menu items.
- Space Between: This option will allow you to set the space between each item on the menu.
On desktop, this will apply to the submenu or dropdown menu. And on mobile, this will apply to the entire menu.
For each of the three states, the following items can be set independently: Normal, Hover, and Active.
- Text Color: Set the color of the text.
- Background Color: Apply the background color.
- Typography: Set the typography for dropdown.
- Border Type: Select a border type around the dropdown menu, choosing either None, Solid, Double, Dotted, Dashed, or Groove.
- Width: Choose a width for the border.
- Color: You can set the border color from here.
- Border Radius: If you want to make the corner round of the border, you can do it.
- Box Shadow: You can also add a box-shadow for the box from here to make it stand out a little more.
- Horizontal Padding: Here, you can set the horizontal padding around the text of the menu items.
- Vertical Padding: You can also set the vertical padding around the text of the menu items.
- Border Type: You can also add a divider after each item of the dropdown menu. If you want to add a divider, select a border type for the divider. You can choose from None, Solid, Double, Dotted, Dashed, or Groove.
- Color: If you have chosen to add a divider, you can set the color of the divider from here.
- Border Width: If the divider border is chosen, you can set the border’s width from here.
- Distance: Here, you can set the space between the toggle and dropdown menu.
For both the normal and hover states, the following things can be set separately.
- Color: You can set the color of the toggle button from here.
- Background Color: You can set the background color of the toggle button.
- Size: Here, you can control the size of the toggle button.
- Border Width: You can set the border width of the toggle button from here.
- Border Radius: If you want to make the corner round of the toggle button, you can do that easily from here.
The Advanced tab is full of useful features:
- Advanced – Options include; margin, padding, z-index, CCS ID and CSS Class.
- Motion Effects – There are a range of scrolling effects, mouse effects, and you can also choose how the selected element enters the screen, the delay and if it is sticky.
- Background – You can select the background for standard and also for hover. You can choose from a solid background and a gradient.
- Border – This allows you to add a border to the element when standard and hovers along with the border radius. You can also add a box shadow.
- Positioning – You can change how the element is positioned on the page. For the page width, you have default, inline, and custom. For the page position, you have default, absolute, and fixed.
- Responsive – The responsive options will allow you to hide certain sections or elements on different screen sizes. This can be useful when redesigning a page for mobile. On certain elements, you can reverse the columns.
- Attributes – (Pro Feature) You can add custom attributes to the element; you can find a full list here.
- Custom CSS – (Pro Feature) You can add CSS to the site or the element through this box. It is best to add the CSS for the element and add the CSS for the global setting site. You can use “selector” to target the specific element you have open.