Customizing Top Navigation Menu
In this article:
Introduction
Managing navigation links
Drop-down list
Adjust gap size between navigators
1. Introduction
When customers can't find what they are looking for from your home page, the next thing they'll do is scanning through any menu or links column in the page searching for category or topic which seems closer to their interest. That is why well organized navigation with intuitive names is just as important in retaining your website lead and reduce bounce rate.
In this article we will more focus on the navigation links on main menu. But it is almost the same for Quick Links Footer, except that footer does not support drop-down list.
2. Managing navigation links
Navigation links of your store are managed at Admin Panel > Online Store > Navigation. There are 3 types of navigators you may find on the main menu bar:
System default navigators ( locked )
Manually added navigators
Navigators auto created by installed apps
2.1 System default navigators ( locked )
Home and Catalog are default navigators created by system which have a lock indicator in front of them.
Home - This navigator will always direct visitors to your homepage, it can't be removed or hidden but you can rename it.
Catalog - This navigator will always display all of your product collections, including sub-collections at drop-down list. It can't be removed but you can rename or hide it by clicking Edit > uncheck Navigator publish date > Save.
2.2 Manually added navigators
You can add links, pages, blog or collections on main menu. Follow the hyperlinks below to find out in details how you can create each type of the navigator on main menu.
Links and Pages - links to external web-pages which you would like to share with visitors, or content pages within your store
Blog - link to your blog articles and stories ( blog type navigator works the same way as page type navigator )
Collections - links to your collections like promotional products or new arrivals
2.3 Navigators auto created by installed apps
Some of the installed apps e.g. Contact Form Plus and Help Center will auto create a navigator on your main menu.
3. Drop-down list
3.1 A drop-down list will be auto formed below the main navigator whenever there is sub-navigator. Use drag-and-drop method to create sub-navigator and changing navigator order.
3.2 Existing sub-collections created in Admin > Products will also contribute to the drop-down list below collection type navigator.
4. Adjust gap size between navigators
4.1 Go to Admin Panel > Online Store > Themes > Edit Source > assets/timber.scss > look for .site-nav__link > replace $gutter /2 with your preferred padding size > Save.
Tips: 8px 15px 15px 15px means the padding size of top right bottom left
Attached GIF image for extra reference:
