How to Hide Navigation Bar on Certain Pages in Shopify: A Step-by-Step Guide

“Hide navigation bar” is one of the most common design requests among Shopify merchants when customizing their online stores.

As you run your Shopify store, you might notice that some themes don’t offer the flexibility you need. For example, the popular Dawn theme only lets you hide the navigation bar across all pages through the editor, which may not match your specific layout needs.

In this article, we’ll guide you step by step so you can learn how to hide the navigation bar on your Shopify online store.

Why Merchants Want to Hide the Navigation Bar

Based on our research and conversations with Shopify merchants, Shopify store owners choose to hide the navigation bar for a variety of reasons:

• Phased Launch: Hide navigation bar links to pages still under development.
• Seasonal Products: Show or hide navigation bar items based on seasonal availability.
• Focused Landing Pages: Remove navigation bar for distraction-free conversion.
• Single-Product Stores: Hide the navigation bar to build a more focused buying journey.
• Access Control: Expose only public pages without revealing private site areas.
• Homepage Design: Remove the navigation bar only on the homepage for a clean look.
• Custom Page Layouts: Hide navigation bar to match a minimalist page design style, especially on mobile.

These needs generally fall into three common patterns for hiding the navigation bar:

1. Hide the navigation bar completely across all pages.
2. Hide it only on specific pages, such as product pages or landing pages.
3. Hide only certain menu items of the navigation bar.

We’ll walk you through how to implement each pattern step by step.

Prerequisite: Open the Theme Editor

To make these changes, you’ll need to work inside the theme editor.

In your Shopify admin, go to Online Store > Themes, then click the Customize button next to your theme to open the theme editor.

Note: You can also open your current theme’s editor directly via this link.

Hide the Navigation Bar Completely Across All Pages

Step 1: Hover over the Header section. You’ll see an eye icon appear, click on it, and the navigation bar will be hidden.

If you are using a mobile device, first tap on the navigation bar, then tap the settings drawer button at the bottom.

Then tap the three-dot menu in the top right corner to open more options.

Next, tap the Hide button.

Step 2: Finally, click the Save button in the top right corner to apply your changes, you’re all set!

Hide the Navigation Bar Only On Specific Pages

To implement this pattern, you’ll need to edit your theme’s Liquid code. If you’re new to Shopify themes or Liquid, you can refer to the following resources to learn more:

• Getting started with Liquid for Developers
• Theme architecture with Liquid for Developers

Note: The following steps use the Dawn theme as an example.
Other themes may have slight differences, but the overall approach remains the same.
If you’re using a different theme, consider reaching out to the theme developer for specific guidance.

Step 1: In your Shopify admin, go to Online Store > Themes, then click the three-dot menu next to your theme and select Edit code. This will take you to the theme’s code editor.

Step 2: In the code editor, expand the DAWN folder, then open the sections directory. Find and select the header.liquid file — its content will appear on the right side for editing.

Step 3: Wrap the content of the header.liquid file with an unless statement, like the Liquid snippet below. Adjust the condition based on which pages you want the header to be hidden on.

Note: Refer to request.page_type to learn how to set the right condition for different page types.

{%- unless request.page_type == 'product' or request.page_type == 'collection' -%}
  HTML, CSS, and JavaScript content that appears on store pages.
{%- endunless -%}

Note: The {% javascript %}…{% endjavascript %} and {% stylesheet %}…{% endstylesheet %} tag blocks cannot be wrapped inside an unless statement, doing so will cause a syntax error. Consider commenting them out during your modification if needed.

This part can be a bit tricky, but no worries.

We’ve provided ready-to-use header.liquid files for freshly installed Dawn and Horizon themes. You can use them as a reference or copy them directly if they match your needs:

• Example of Dawn 15.4.0
• Example of Horizon 2.0.3

Step 4: Click the Save button in the top right corner to apply your changes.

Hide Only Certain Menu Items of The Navigation Bar

There are two ways to implement this pattern:

• Use CSS rules to hide specific navigation bar items.
• Edit menu configuration for navigation bar.

The CSS Rules Way

Note: For this method, you’ll need to find the CSS selector of the specific navigation bar items you want to hide. Refer to How to Copy a CSS Selector of a Page Element to learn how to locate it.

Step 1: In the theme editor, select Header, then click on the Custom CSS option in the settings panel.

Step 2: In the Custom CSS input field, add a display: none rule for the CSS selector of the navigation bar item you want to hide.

Keep in mind that the copied CSS selector may include unnecessary parts, and you might need to adjust it based on testing.

For example, in the Dawn theme, the copied selector might look like this:

#shopify-section-sections--18519140401306__header > sticky-header > header > nav > ul > li:nth-child(3)

You need to remove the first two parts to make the rule work properly:

header > nav > ul > li:nth-child(3)

Step 3: Click the top right Save button to apply your changes, job’s done!

The Menu Configuration Way

Note: Based on our research, most merchants want to hide navigation bar items, not delete them. So please use this method with care.

Step 1: In the theme editor, select Header, then click the Menu option, and choose Edit. This will take you to the menu editing page.

Step 2: On the menu editing page, hover over the menu item you want to remove, click the Delete button, then click Save.

Alternatively, you can duplicate your original menu configuration and remove the target navigation bar item only in the duplicated version.

Note: Refer to Menus and links to know more about menu editing.

This way, you preserve the original setup while hiding specific items where needed.

Step 3: Preview store pages, you’ll see the target navigation bar item is no longer visible.

Final Words

Congratulations! 🎉

And thank you so much for taking the time to read this guide, created with love ❤️ by the Shopify expert content team at PageUni.

We hope it helped you successfully hide the navigation bar on your store.

We’ll continue listening to the needs of the Shopify community and offer practical support, including expert content, tools, and solutions to help merchants overcome everyday challenges.

Stick with us, even more helpful resources are just around the corner!