How to hide Main Nav menu on just ONE of my collections? Minimal Theme.

[elizajanecurtis]

Hi! I am using the Minimal theme. I'm trying to figure out how to hide the main nav menu from the header, for JUST ONE of my collection pages. I'd like the rest of my collections to show that nav menu.

I am NOT referring to the "breadcrumbs" but to the actual main nav in the header.

I'm feeling stuck... I have tried creating an alternate theme.liquid file and hiding the main nav, but I can't figure out how to apply that theme.liquid file to this collection. I have also created an alternate collection.liquid file, and I figured out how to select that file from the collection page, but I don't think that file contains any reference to the main nav, because that's in the theme.liquid file. 

I'm SURE there must be a way to do this, but I really don't know anything about CSS and code, so ... hoping someone else knows how? Thanks in advance!! 🙂
Eliza

[Eric_K_]

Edit your layout/theme.liquid file. Right above the line that has

</head>

Add in

{% if collection.handle == 'COLLECTION_HANDLE' %}
<style>
nav {display: none;}
</style>
{% endif %}

Replace COLLECTION_HANDLE with the collection handle from the collection you want to hide the menu on. So as an example, on this page https://minimal-vintage.myshopify.com/collections/prints the collection handle is 'prints'

[elizajanecurtis]

Thank you so much for your advice! Unfortunately, this isn't doing it for me. Any suggestions for how to make this work? 
Here's the page that I'm trying to apply it to:

https://www.morrisessex.com/collections/wholesale-line-sheet

Thank you!!
Eliza

[Eric_K_ · Accepted solution]

Looks like the code on your theme is a little different than the current version of minimal in Shopify's theme store.

Here's the code you can use: 

{% if collection.handle == 'wholesale-line-sheet' %}
<style>
.site-nav {display: none;}
</style>
{% endif %}

[elizajanecurtis]

AHHHHHH YES!!! Thank you so much, I REALLY appreciate your help, it worked! This is amazing! I've wasted a lot of time trying to figure this out myself, haha! Thank you so much for helping me figure it out at last! 😄

-Eliza

[Eric_K_]

No problem! Glad I could help.

Also if you want to hide the button on mobile view too, use this code:

{% if collection.handle == 'wholesale-line-sheet' %}
<style>
.site-nav, .mobile-nav-trigger {display: none;}
</style>
{% endif %}

[studio-umbrella]

you can also use that liquid 'if' statement but to wrap the entire menu so it doesn't even render on the source code, which speeds up page load for that page.  

{% if collection.handle == 'wholesale-line-sheet' %}
... HTML code of menu ... (maybe it's a simple 'include'?)
{% endif %}

[debr20]

Hello,

I am trying to hide the PARTNERS section on my main menu.

https://americanheroescoffee.com/

Does anyone know how to hide it without deleting it - I'd like to still be able to give out the URL for the partner pages underneath but I do not want them to show on my website - only if they have the link.

Thank you!

[studio-umbrella]

You can just remove the item "Press" from the navigation menu. That way the page (and link) isn't deleted, it just doesn't show up on the menu itself.

[poshcarbon]

Hi Eric_K_

I'm trying to accomplish the same thing. I want to hide a specific navigation collection menu from my header while I import products to it from Oberlo until a certain date. I tried your steps and I wasn't able to hide the specific collection from the header. I have the Minimal theme. I'm not able to import products from Oberlo, because I have to have a collection available on the navigation menu to import it to.

I deleted the collection from the navigation menu and made it unavailable on my store, because I don't want my customers to interact with it until next month. The url would be:

https://poshcarbon.com/collections/christmas-in-july

Thank you

Aisha

[fillmycarts]

Hi! I'm trying to figure out how to remove the "Log In" and "Create Account" links on the drop down menu while using mobile. I want them to have an icon right beside the Cart icon on the mobile breadcrumb. 

[ComeHaveASesh]

Hi there,

We are using the Debut theme and neither of the above codes are hiding the section from the menu navigation. Is someone willing to take a look and see if the code needs to be tweaked a little for our theme? 

[millbee]

can you help me remove nav bar from checkout and cart page - https://millbee.com/cart

[johnwinckel]

Hi, it works great to hide the entire navigation, but I would like to only hide certain navigation buttons, not the entire navigation.

Can someone edit the code below so that I can hide specific menu buttons when visitors go to certain collections?

{% if collection.handle == 'postcards-wholesale' %}
<style>
.site-nav, .mobile-nav-trigger {display: none;}
</style>
{% endif %}

[johnwinckel]

Hi, it works great to hide the entire navigation, but I would like to only hide certain navigation buttons, not the entire navigation.

Can someone edit the code below so that I can hide specific menu buttons when visitors go to certain collections?

{% if collection.handle == 'postcards-wholesale' %}
<style>
.site-nav, .mobile-nav-trigger {display: none;}
</style>
{% endif %}

[studio-umbrella]

You're going to have to put that "if" conditional statement within the loop of the menu items itself. 

and then add another condition if the handle equals something specific:

{% if collection.handle == 'postcards-wholesale' and menu_item.handle == "page-handle" %}
<a href="...">...</a>
{% endif %}

[johnwinckel]

Thanks so much, but what should I add in this part <a href="...">...</a> ?

Regards, John

[studio-umbrella]

It depends on the code. You have to find where the menu items is being rendered and then wrap the conditional statement around those links.

[brendaquinby]

I have used this:

{% if collection.handle == 'adoption-board' %}
<style>
.site-nav {display: none;}
</style>
{% endif %}

and it hides the menu but the collection no longer shows, I just get