Docs

[philkop]

Hey guys, I am trying to remove the header, or rather the navigation bar from my woocommerce single item pages.

I am using a one page design and the nav menu from my main page keeps popping up on the product pages. The problem is, these links don’t do anything, so I’d rather hide them all together.

I’ve tried the following code with no results.

.single-product h1.h-landmark, .single-product .x-header-landmark {
display: none;
}

Here is an example product page. http://www.philswallets.com/product/solid-v2

It would be ideal if I could just block the whole navbar so that you only see the main logo area. I hope there is a way to do this on all pages of this type (product) so that everytime I add a new product, the change is implemented.

Best, Phil

[Rue Nel]

Hello Phil,

Thanks for writing in! The issue here is not your navbar of the links of the menu items. The problem is that you have use one page navigation incorrectly. You are supposed to have two sets of menu. The correct way of having one page navigation menu is to have two set of menus. One menu is for your primary menu which you can assign links that will point to a certain section in your homepage just like this http://your-domain.com/#about. And on the other hand, the second menu is intended only for the one page navigation and it is only useful on your page because your link has this format “#about”.

To know more about one page navigation, please check it here: https://community.theme.co/kb/how-to-setup-one-page-navigation/

Meanwhile, if you really want to get rid of the navbar in all your product pages, you can make use of this code instead:

.single-product .x-navbar-wrap {
    display: none;
}

Hope this helps.

[philkop]

Got it!

I am using my one page nav on my homepage, so to me it seemed like setting it as primary would be best. Thanks to your response, I realized that the woocommerce shop pages will default to whatever the primary menu is, so I simply made a new, primary menu with just a link to the homepage on it. Worked great!

You guys rock!

Do you know if there is a link I can make on my primary menu to have it serve as a “back” button instead of a link to the homepage like I currently have it?

[Rupok]

Hi there,

Thanks for updating. Back button already presents on the browser so it’s unnecessary I think. However if you still want then you can use one of these way :

First Method :

<a href="javascript: history.go(-1)">Go Back</a>

Second Method :

<a href="#" onClick="history.go(-1); return false;">Go back</a>

Hope this makes sense.

Cheers!

[Author]

Posts