Replicate front page header across site

Hello, the frontpage of the site has a transparent header which changes to a dark sticky header after scrolling, but all other pages have a white sticky header after scrolling.

I really like how it changes to a dark header and want to replicate it across the site, but can’t find a setting to do so and have looked through docs and support threads. Could you help please?

Links in private content below to demonstrate this.

Hello,

Please navigate to Woodmart > Header builder http://prntscr.com/iyd2pe

Choose the proper header type (which you want to change) http://prntscr.com/iyd333

Change the scheme color in the row settings http://prntscr.com/o7i5om

More instructions here: https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

Best Regards

Thanks for the info, but that doesn’t give me an answer to my original question. I can’t seem to find anywhere to set the colour after scrolling?

Could you explain how to make the header change colour after scrolling like in the front page I posted please?

Hello,

For pages, the color after scrolling may be black or white, depending on color scheme configured in the row https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

Best Regards

I want to be able to do this on product pages too (I want this on every page/category/product on the site), but if I go to Theme Settings > Product Page and change “Single product header” to use the same one as the front page “Header Organic Overlap”, it isn’t the same header and doesn’t change to dark after scrolling?

I don’t see anywhere that allows me to set the initial colour and also the colour of the sticky header after scrolling? If I follow the guid and change the header background colour, it’s always the same colour.

Hello,

Header Overlap is not very good for a product page it if overlaps the content

If you still want this type of the header, please add this CSS to the Theme Settings > Custom CSS > Global

body .whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) {
   background-color: transparent;
}

Best Regards

Thanks Elise, I see what you mean about it not working for a product page.

Can the same be applied for using the non-overlap header (Header Organic) so I can have this effect on proudct pages? Is there Some CSS you can provide to change the colour after scrolling to invert it into the dark them and light text please? That would be ace 🙂

Hello,

Please take this code:

.single .whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) {
   background-color: transparent;
}

Best Regards

Hello,

This doesn’t seem to have made any difference at all 🙁

I’ve sent access to admin in the private content area, could you have a look for yourself please?

Hello,

You say in the beginning “REPLICATE FRONT PAGE HEADER ACROSS SITE” then “White header with dark text on initial load, then dark header with white text after scrolling” and it is not the same.

On the home page, you apply Header Organic Overlap, it is not good for other pages and for product page as it will overlay the content and would not be visible with the white letters on the white background. I can provide custom CSS however it will change all the headers, including home page.

Set the one and the same header on all the pages and products and provide clear instruction on what to change.

Best Regards

Thanks for your help, it has been a challenge to communicate effectively so you understand what I want. The header organic overlap is already set from the demo import, I was just mentioning that so you understood that I wanted to know how to CHANGE the header colours after scrolling. This theme is new to me and your first two replies didn’t answer my question.

Let me clarify…

I want to use “header organic” on all pages.
I’d like the header to have a white background with black text initially, then a black background with white text after scrolling/sticky.

Thank you for all your help so far 🙂

Hello,

Please add this code for the Header Organic to the Theme Settings > Custom CSS > Global:

body .whb-sticked .whb-color-dark:not(.whb-with-bg) {
    background-color: black;
}
body .whb-sticked .main-nav .item-level-0 > a{
color:white;
}
body .whb-sticked .main-nav .item-level-0 > a:hover{
color:red;
}
body .whb-sticked .main-nav .current-menu-item > a{
color:red;
}
body .whb-sticked .woodmart-header-links .item-level-0 > a,
body .whb-sticked .search-button > a, 
body .whb-sticked .woodmart-wishlist-info-widget > a,
body .whb-sticked .woodmart-shopping-cart > a {
color:white;
}

Best Regards

That is fantastic! thank you very very much :0)

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts