> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Customize top navigation menu ![](https://storage.crisp.chat/users/helpdesk/website/9899fced71935000/de0a684a-5f72-406e-878f-f320e3_qll5cz.png) ### In this article: 1. [Introduction](#1-1-introduction) 2. [Hide Home and/or Catalog](#1-2-hide-home-andor-catalog) 3. [Add new navigator](#1-3-add-new-navigator) 4. [Navigator by apps](#1-4-navigator-by-apps) 5. [Delete navigator](#1-5-delete-navigator) 6. [Create drop-down list](#1-6-create-drop-down-list) 7. [Add plain text navigator (not clickable)](#1-7-add-plain-text-navigator-not-clickable) 8. [Adjust gap size between navigators](#1-8-adjust-gap-size-between-navigators) 9. [Customize Quick Links footer](#1-9-customize-quick-links-footer) # 1. Introduction The **top navigation menu** makes it easy for customers to explore your store by highlighting key pages, collections, or links. A well-organized menu with clear, intuitive labels is key to keeping visitors engaged and reducing bounce rates, you can customize it to align with your brand and enhance the shopping experience. To start customizing top navigation menu, go to your [EasyStore Admin](https://admin.easystore.co/login) > Channels > Online Store > **Navigations**. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_13qe0g0.png =800x349) # 2. Hide Home and/or Catalog 2.1 At start, you will see 2 system default navigators, indicated by a lock icon: * **Home** – This navigator always directs visitors to your homepage * **Catalog** – This navigator displays all product collections, including sub-collections in a dropdown list ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2025-02-25-at-10531_76fpvl.png =700x135) 2.2 These 2 system default navigators can not be removed, but you can rename or hide them. **Edit** the navigator > **rename** or **uncheck Navigator publish date** to hide > **Save**. ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/1440-x-705px-gif-31_byk54l.gif =800x391) # 3. Add new navigator 3.1 To add more navigators on top navigation menu, click **Add navigation** button > select **Main Menu**. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_2cu3qj.png =800x503) Next, select navigator type and fill in / select the relevant details: ### Link 3.2 Use this navigator type to direct visitors to any page, it can be a page within your online store or an external web page, just paste the page link under **URL and handle**. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1ypddo0.png =500x524) ### Page / Blog / Collection 3.3 Use these navigator types to conveniently direct visitors to a content page, blog or a product category within your online store, just select the page from the drop-down menu. If you haven’t had these pages created, refer guides below: * [Create content page](https://support.easystore.co/en/article/add-new-content-page-for-your-store-1apqwd8/) * [Create blog](https://support.easystore.co/en/article/add-blog-function-1rj7v4x/) * [Create collection (product category)](https://support.easystore.co/en/article/managing-product-collections-bbrt48/) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_9wh2he.png =500x513) ### Store Locator / Voucher 3.4 Use these 2 navigator types to direct visitors to your store locations or direct logged-in customers to their voucher page. You don’t have to fill in or select anything as the page is fixed. If you haven’t set up locations or voucher yet, refer guides below: * [Create location](https://support.easystore.co/en/article/set-up-pickup-location-6pf8tu/) * [Create voucher](https://support.easystore.co/en/article/create-voucher-1rhm1bb/) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1nsypvr.png =500x432) 3.5 Give the navigator a **name** which will appear on the main menu. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1pv4u1b.png =500x212) 3.6 Tick **Navigator publish date** and **select the date** you want to publish > **OK**, to publish immediately, just click **Now** > **Save**. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/gif_sngwz9.gif =600x509) # 4. Navigator by apps 4.1 Some of the installed apps will auto-create a navigator on your main menu, with a lock icon. Example: * [Contact Form](https://support.easystore.co/en/article/contact-form-1wnaavq/) * [Contact Form Plus](https://help.easystore.co/en/articles/1764166-contact-form-plus) * [Help Center](https://help.easystore.co/en/articles/431122-create-a-help-center-for-your-site) ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1vqnqo3.png =700x192) # 5. Delete navigator To delete navigator, edit the navigator > **Delete this navigation**. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_1qbsd2t.png =600x490) # 6. Create drop-down list 6.1 To form a drop-down list, use **drag-and-drop** method to create a **sub-navigator**. You can form up to 3 tiers of drop down. ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/1440-x-705px-gif-33_13qby3v.gif =650x391) 6.2 For **Collection type** navigator, the **sub-collections** created under Admin Panel > Products > Collections will auto form drop-down list as well. ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2025-02-25-at-30348_t9mlbt.png =500x439) 6.3 You can also use drag-and-drop method to **arrange navigators**. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/gif_nqm91e.gif =600x391) # 7. Add plain text navigator (not clickable) 7.1 Go to [EasyStore Admin](https://admin.easystore.co/) > Channels > Online Store > Themes > Edit Source > **site-nav.liquid >** replace the highlighted part with codes below ``` {% if link.url != "/#" %} href="{{ link.url }}" {% endif %} ``` ![](https://storage.crisp.chat/users/helpdesk/website/5bdafe56e6edd000/bb6dcdf1-ab31-42ef-8d07-e1cb94_1vuapsa.png =800x310) 7.2 Then, when create navigator, choose **Link** and put **#**. ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2025-02-25-at-30523_167fvmf.png =550x583) # 8. Adjust gap size between navigators Go to [EasyStore Admin](https://admin.easystore.co/) > Channels > Online Store > Themes > Edit Source > **assets/base.css > l**ook for **.header__menu-item** > replace **1.2 rem** with your preferred padding size > Save ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_qb2733.png =700x547) **Attached GIF image for extra reference:**  ![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/b-3_1hqlaqx.gif) # 9. Customize Quick Links footer Steps 3 to 5 above work the same for __Quick Links footer__. ![](https://storage.crisp.chat/users/helpdesk/website/-/b/3/4/7/b34797d9594d3000/image_8sfjlh.png =800x132)