Solved

How to Hide Header Navigation Menu On Product Page

Newbie6
New Member
5 0 0

Hello Everyone,

I am using the Debut theme to sell a single product.  On the product page I want to hide the header navigation links to "home", "catalog" and the search icon.

None of the coding solutions I have come across on here have worked so far.

 

 

 

Accepted Solutions (2)
g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

You can add this at the end of your CSS file (Themes -> Edit code -> Assets -> theme.css) :

#shopify-section-header, .product-form__cart-submit {
   display: none;
}

 

Although, imo the best thing to do here would be to create an alternate product template and assign your products that template.

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.

View solution in original post

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

@Newbie6 if you want to keep payment icons and Shopify logo, you can revert back to code posted initially.

There are 2 ways to remove the links from footer. The easiest way would be to remove from the Customize panel (recommended): Navigate to Themes -> Customize -> Footer and remove these sections. Choose white background colour or whatever the background colour of your website is and your footer will blend in. 

The second way is to add this code to your CSS file:

.site-footer {
    padding: 0;
}

.site-footer .page-width:first-child {
  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.

View solution in original post

Replies 14 (14)

g33kgirl
Shopify Partner
390 109 142

You only want to remove the main navigation and search but want to keep the logo and cart icon in their current position, is that correct?

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.
Newbie6
New Member
5 0 0

Hello g33kgirl,

If possible, I would like to remove the logo and the cart icon too.

And for the page itself, there is a "Add to Cart" and "Buy It Now" button.  I would like to remove the "Add to Cart" button... if possible.

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

You can add this at the end of your CSS file (Themes -> Edit code -> Assets -> theme.css) :

#shopify-section-header, .product-form__cart-submit {
   display: none;
}

 

Although, imo the best thing to do here would be to create an alternate product template and assign your products that template.

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.
gacontre
Tourist
5 0 4

@g33kgirl This solution works great but removes the header from the entire site. Is there a way to specify to hide Only on Product pages? Thanks in Advance

g33kgirl
Shopify Partner
390 109 142

@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
Visitor
1 0 0

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

g33kgirl
Shopify Partner
390 109 142

@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.
DeadEndStreet
Pathfinder
103 0 35

Hi,

Not particularly related to this thread but is there a way to remove the header section (well I have done this) but improtantly keep the navigation bar showing?

I have removed the header section (display: none) but it removes the nav bar as well and my logo.

Ideally I want my logo within the nav bar and showing at top of page.

I am using the venture theme.

Any help would be appreciated.

VicZhang
Visitor
1 0 0

Cool

Newbie6
New Member
5 0 0

Hello,

Your solution worked really well. 

Is there a way to remove the "Quick links", "Search" and "Newsletter" option from the footer?

g33kgirl
Shopify Partner
390 109 142

@Newbie6,  to remove the footer, amend the previous code:

#shopify-section-header, .product-form__cart-submit, .site-footer {
   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.
Newbie6
New Member
5 0 0

Thanks again.


Is there anyway to keep the "Powered by Shopify" and Payment type accepted in the footer visible?

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

@Newbie6 if you want to keep payment icons and Shopify logo, you can revert back to code posted initially.

There are 2 ways to remove the links from footer. The easiest way would be to remove from the Customize panel (recommended): Navigate to Themes -> Customize -> Footer and remove these sections. Choose white background colour or whatever the background colour of your website is and your footer will blend in. 

The second way is to add this code to your CSS file:

.site-footer {
    padding: 0;
}

.site-footer .page-width:first-child {
  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.
Newbie6
New Member
5 0 0

Thank you very much for all your help