Remove mobile header

I found this code that hides the mobile header from home page.

body.home header{
display:none;
}

What should i add to the code to also remove mobile header for the following pages.

1) Checkout
2) Log in
3) Member area

I’m using the mobile navigation bar so I actually considering removing the mobile header on all pages how would i do that in case i decide?

Regards

Hello,

Try this code:

body.woocommerce-checkout header{
display:none;
}
body.woocommerce-account header{
display:none;
}

What page do you mean saying “Member area” ?

Best Regards

Great!
2 things related to this.

Both the woocommerce. pages now do not have any margin on top so content touch mobile browser. I want to add 10 px. whitre space but can not find where to edit these pages.
See attached screenshot

If I was to apply hide header to all product pages as well, what would be the class to do this?

thanks!

Attachments:

You must be logged in to view attached files.

Hello,

I do not see the problem. What divide do you use?

Best Regards

I have Samsung note 9 and Samsung galaxy 10, you can see screenshots from my phone attached.
I get this when simulating mobile device mode from my desktop as well.

Regards,
Nicolaj

Attachments:

You must be logged in to view attached files.

Hello,

Please replace the custom CSS for this one:

body.single-product header,
body.woocommerce-checkout header,
body.woocommerce-account header{
display:none;
}
body.single-produc .website-wrapper,
body.woocommerce-checkout .website-wrapper,
body.woocommerce-account .website-wrapper {
margin-top:40px;
}

Please add this code to the Theme settings > Custom CSS > Mobile/Tablet

Best Regards

Hi that worked great!
just one annoying thing on the single product page.
It appears that the breadcrumbs is tied to the header, so now it does not show when header is hidden.

I’m using the below header options and wanted the breadcrumb navigation be the first thing user see on the single product pages.
Can i do something about this?

Best regards

Hello,

You can change the breadcrumbs location in the Theme Settings > Product page > SHOW / HIDE ELEMENTS

Best Regards

Hi Elise,
that’s what i referred too.
I chose already to show breadcrumbs below header.

However when i add your css it also removes the breadcrumbs.

The strange things is that when i instead of css use woodmart header builder and hide the header on all page (mobile) the breadcrumbs do still show.
However it was not my goal to hide header on all pages.

best regards,
Nicola

Hello,

Set the showing breadcrumbs in the Product summary https://prnt.sc/u4sdl6

Best Regards

[Author]

Posts