How to Hide Header Navigation Menu On Product Page

Solved
g33kgirl
Shopify Partner
321 95 113

@gacontre yes, you can use this code to hide from product pages:

.template-product #shopify-section-header {
   display: none;
}

 

If you want to remove from collection pages:

.template-collection #shopify-section-header {
   display: none;
}

 

If you want to remove from both:

.template-collection #shopify-section-header,
.template-product #shopify-section-header {
   display: none;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
SmithandVena
New Member
1 0 0

This is great! What if you only want to hide the header and footer from a specific Collection (not ALL collections)?

0 Likes
g33kgirl
Shopify Partner
321 95 113

@SmithandVena in that case, you will need to edit your theme.liquid file and add this code to the body tag:

<body class="template-{{ request.page_type | handle }} {% if collection %}collection-{{ collection.title | handle }}{% endif %}">

 

and then in your CSS file (replace [title] with the title of your own collection:

.template-collection.collection-[title] #shopify-section-header {
   display: none;
}
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl ☕
If you're not comfortable with code, please modify code files at your own risk.
0 Likes