How to Hide Header Navigation Menu On Product Page

Solved
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)

Accepted Solutions
g33kgirl
Shopify Partner
323 95 114

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
323 95 114

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 13 (13)
g33kgirl
Shopify Partner
323 95 114

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
323 95 114

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

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
323 95 114

@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
323 95 114

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

Newbie6
New Member
5 0 0

Thank you very much for all your help

gacontre
Tourist
5 0 3

@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