In this article:

  1. Introduction

  2. Managing navigation links

  3. Drop-down list

  4. Adjust gap size between navigators

  5. Sub-navigation under the same row (For Candy, WAVE, LUCKY and X-Force only)

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 - 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. Adjust gap size between navigators

Go to EasyStore Admin > Channels > Online Store > 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: 

5. Sub-navigation under the same row

📌 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



Related articles:
Adding a navigation side bar to your site
Rename / Remove Quick Links and Follow Us sections

Did this answer your question?