How Can We Help?
Create navigation menu
99% from the websites over the internet have at least one navigation menu. It is an integral part of the website as it is the main connection between the internal pages. There are different variations of menus – could be horizontal or vertical, could be with or without dropdown submenu, could be mobile only with off-canvas sidebar and for sure – it should be responsive. Most of the navigation menus are placed in the header section, but they also could be positioned in the sidebar areas or even in the footer section of the website.
In this guide we are going to show you how to create menu, place it somewhere in the website and make some style adjustments.
Create Menu Structure
First of all you have to create the menu structure in the WordPress admin. To do this go to WP admin panel and click on Appearance -> Menus. You can edit existing menu or create new one. Lets start from scratch and create our own brand new menu. Click on “create a new menu”, enter a menu name and click on the Create Menu botton.
On the left side there are menu blocks with all the pages, posts, categories, custom links which you can add to the menu. Just select the desired items and click Add to Menu. After you add the elements to the menu you can drag to reorder or make items child for some element.
Once you are ready with the menu structure click on the Save Menu button to keep the changes.
Use Navigation Menu Widget for Elementor
In order to display menu in your website go to WP admin and edit the Elementor template where you want to place the menu. Most often the navigation appears in the header section, so go to WP admin -> Templates -> Header tab and edin your section with Elementor. Find Navigation Menu widget and drag and drop it to the editor.
Edit the Navigation menu widget. In the Settings section under Content tab select the menu you have already created in the WP admin. You can adjust the breakpoint when the menu transforms from desktop to mobile version – a hamburger button appears, which toggles an off-canvas sidebar panel. You also have a lot of options to design and style the menu the way you want – alignment, sidebar position, button and dropdown styles.
Tip: If you want to create an always-mobile offcanvas menu set the breakpoint to 9999.
In our Marmot PRO version we have Advanced Navigation Menu widget which includes additional features like custom toggle icon, adding labels, adding custom menu item, vertical layout as well as extra off-canvas effects and advanced style options.
