Customize top navigation menu

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.

Navigation links of your store are managed at EasyStore Admin > Channels > 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 the 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.

Above 2 navigators 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 & store locator 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](https://support.easystore.co/en/article/add-product-categories-on-top-navigation-menu-k4crs3/) - links to your collections like promotional products or new arrivals

Store Locator - links to your location set on Settings > Locations

✅ 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

A drop-down list will be auto-formed below the main navigator whenever there is a sub-navigator. Use the drag-and-drop method to create a sub-navigator and changing navigator order.

Existing sub-collections created in Admin Panel > Products > Collections will also contribute to the drop-down list below the collection type navigator.

4. Add plain text navigator (not clickable)

Go to EasyStore Admin > Channels > Online Store > Edit Source > site-nav.liquid > replace the highlighted part with codes below

{% if link.url != "/#" %} href="{{ link.url }}" {% endif %}

Then when create navigation, choose Link and put #

5. Adjust gap size between navigators

Go to EasyStore Admin > Channels > Online Store > Edit Source > assets/base.css > look for .header__menu-item > replace 1.2 rem with your preferred padding size > Save

💡 Tips:replace with either 1.4rem or 2rem and so on depending on their preferred size

Attached GIF image for extra reference:

📌 Note: This is available for Candy, WAVE, LUCKY and X-Force only

Step 1 : Click on Channels > Online Store > Edit Source and select timber.scss file

Step 2 : Look for .site-nav__dropdown { around line 2300 and find

Step 3 : Change the flex-wrap: wrap; to flex-wrap: nowrap;

Step 4 : Save and here's the result

Before:

After:

Updated on: 13/02/2024

Was this article helpful?

Thank you!