What is a Navigation Menu? #
A navigation menu is a list of a links pointing to important areas of a website. They are usually presented as a horizontal bar of links at the top of every page on a website. Navigation menus give your site structure and help visitors find what they’re looking for.
WordPress/Ecomly makes it really easy to add menus and sub-menus. You can add links to your most important pages, categories or topics, blog posts, and even custom links such as your social media profile.The exact location of your menu will depend on where you call the menu via Widget or shortcode. You have several options, so you can create different menus that can be displayed in different places: primary menu that appears on the to, secondary menu, a footer menu, or a mobile navigation menu as well.
Creating Your First Custom Navigation Menu #
To create a navigation menu, you need to visit the Appearance » Menus page in your Ecomly store dashboard.
Once you open the menu page, you’ll we see active menu that comes from Ecomly store template and the dropdown list of other available menus. You can edit current menus or create the new one. For creating new menu click the ‘Create Menu’ button. than provide a name for your menu, like ‘Top Navigation Menu’ and click save.
You can choose the pages, categories, posts, custom links, etc you want to add to the menu. You can either automatically add all new top-level pages, or you can select specific pages from the left column. First, click the ‘View All’ tab to see all your site’s pages. After that click the box next to each of the pages you want to add to your menu, and then click on the ‘Add to Menu’ button.
Once your pages have been added, you can move them around by dragging and dropping them.
Note: All menus have their items listed in a vertical (top to bottom) list in the menu editor. When you put the menu live on your site, it’ll either display vertically or horizontally (left to right), depending on the location you select.
Tip: If you’re not sure where each location is, try saving the menu in different places, then visiting your site to see how it looks. You probably won’t want to use all the locations, but you might want to use more than one.
Creating Drop-Down Menus #
Drop-down menus, sometimes called nested menus, are navigation menus with parent and child menu items. When you run your cursor over a parent item, all the child items will appear beneath it in a sub-menu.
To create a sub menu, drag an item below the parent item, and then drag it slightly to the right. We’ve done that with 3 sub-items beneath ‘Services’ in our menu:
You can even add multiple layers of dropdown, so that your sub menu can have a sub menu. This can end up looking at bit cluttered, and many themes do not support multi-layer drop-down menus.
Extended menu settings #
Ecomly set of menu plugins allows changing the menu’s appearance and creating a stylish drop-down menu as well as powerful horizontal and vertical mega menus.
Hover over menu item and click on Settings button.
- Mega Content – Allows you to create Mega Menu content with page builder. You can display anything you want, from products to categories.
- Item Icon – Add stylish icon to menu items.
- Item Badge – Add custom badges to menu items
- Advanced – Hide and show menu items
Setup menu with Page builder #
Navigate to Storefront > Theme Builder. Find Header template and click on Edit with Elementor.
When Page builder opens, in widget bar search for “menu” or select current menu with right click.
Drag and drop the widget or in the current one select a menu from the dropdown. Then you can style your menu.
For better UI we use separate section for mobile menu which allows you to style mobile better. How to work with Page builder on mobile please read here.
