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

Solved
elizajanecurtis
Tourist
3 0 1

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

Accepted Solution (1)

Accepted Solutions
Eric_K_
Shopify Expert
120 22 50

This is an 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 %}

View solution in original post

Replies 18 (18)
Eric_K_
Shopify Expert
120 22 50

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
Tourist
3 0 1

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_
Shopify Expert
120 22 50

This is an 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
Tourist
3 0 1

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_
Shopify Expert
120 22 50

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
Shopify Partner
49 0 11

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
New Member
1 0 0

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
Shopify Partner
49 0 11

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
New Member
2 0 0

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
New Member
1 0 0

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
New Member
1 0 1

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
New Member
3 0 0

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

 

 

johnwinckel
Tourist
5 0 6

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
Tourist
5 0 6

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
Shopify Partner
49 0 11

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
Tourist
5 0 6

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

Regards, John

studio-umbrella
Shopify Partner
49 0 11

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
Tourist
9 0 2

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 

brendaquinby_0-1631864715088.png