Sticky header colors

Hello! I would like to set up a header that overlaps the content. The content is darkish, so I should set the light color mode, for the letters to appear in white. So far, so good. See attached image.
My problem is that I would like that same header to be sticky and, when it appears in the “sticky mode”, I would like it to have a white background, with dark letters (which means dark color mode). See attached image.

Is there a way to solve this equation? Thanks in advance!

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to say but your Site is on Maintenance mode right now, so we are unable to view it.

So, kindly please share your Site WP-ADMIN Login details in the Private Content field so that we can check these concerns on your Site and help you out accordingly.

Best Regards

Hello! Sorry for this inconvinience. The details will be sent in this post.
Yesterday, after opening this topic, I created other headers to test some things out. It turns out that sometimes the logo reduzes its size proportionally, but some other times, it distorts. I have no idea why this happens in some specific pages… If you could help me with that issue as well, I would be glad. Thanks in advance!

Attachments:

You must be logged in to view attached files.

Hello,

1- It seems that the Sticky Header change is already achieved by you because right now as we are viewing the Sticky Header, it seems to be working exactly like you want: https://snipboard.io/ALx98Z.jpg

2- Regarding the Logo distortion, we have viewed multiple Pages on your Site and checked the Logo it seems to be just doing the size transition other than that it is loading fine.

It might be a Cache issue at your end. So, please check back your Site after completely clearing browser and server cache.

Best Regards

Hello again!

1 . My original intent with this post was to be able to set an overlap header using white letters and, when it turns into a sticky header, the letters should turn darkish and the background white. I still can’t achieve that in the moment because when I set the color mode to either light or dark, it applies to both the overlap and the sticky header. So, it still isn’t solved…

2. I’ve checked it in multiple browsers and computers and it distorts in all of them. Some pages work perfectly, and some distort the logo, as in the “Loja” page.

Also, still regarding headers… I want to use that same overlap/sticky header in the single product page. It seems like it is creating a white background (instead of transparent to achieve the overlap effect). Also, could you help me set a margin so the content doesn’t appear behind the header? (Image for reference in the attachments)

Thanks for your cooperation.

Attachments:

You must be logged in to view attached files.

I think I finally figured the distortion. If you could help me with the other issues, that would be lovely! Thanks!

Turns out I didn’t solve it after all. It still happens…

Hello,

1- Firstly, to make the Menu Items color-related change we have applied the following Custom CSS on your Site:

body:not(.single-product) .whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) .wd-nav li a span {
    color: #fff !important;
}

.whb-color-dark:not(.whb-with-bg) .wd-nav li a span {
    color: red !important;
}

Now, the color of the Menu Items without a Sticky Header is white, and with Sticky Header they are appearing as red now.

Location to find Custom CSS, go to Dashboard >> Theme Settings >> Custom CSS >> Global CSS section >> there you can find the CSS pasted. You can change the red color there to your choice.

2- The Single Product page content cut-off issue is also adjusted with the help of Custom CSS on your Site.

3- Regarding the Logo distortion concern, please refer to the following Video for reference: https://www.veed.io/view/646e387b-5000-410b-bc23-e35ab6c7dc0e

We have also visited your Site in two different browsers and the Logo seems to be doing only the Transition effect which it normally does because of different size defined.

Best Regards

Hello!
Thanks for your time and patience.

1. Regarding the menu color items, that’s precisely what I needed. Thanks for your help in this matter. I would just like to ask if this rule applies to all headers that I create? If I want a specific header with different colors, this will act upon it as well?

2. Thanks for your help regarding this as well. I just have to ask something else. The header should be overlapping the content, I dont think that’s the case on the single product pages (as it shows a white background). See this page for reference: https://suri-ecostore.com/produto/augue-adipiscing-euismod/

3. Thanks for the video. I think I figured the distortion yesterday, I don’t see it distorted in any page now.

Happy New Year, Cheers!

Hello,

1- Usually the implemented CSS works on every Header but if you want it for specific Headers too then you can mention us after creating separate Headers. We will check and provide you the CSS for it if it is applicable.

2- On the Single product page, as you know there aren’t any page titles or specific blocks added above the Product content so that’s why the Header seems to be appearing white on that as a whole. We would suggest you to have a separate Header for the Single Product pages where there is a different style so that it will work accordingly there.

3- We are glad to hear that it is sorted out on your Site.

Best Regards.

Hello again!

1. Thanks for the clarification. I duplicated my default header “Menu Principal” (in which you applied the CSS), thus creating one called “Menu Principal (verde)”. I want this new “Menu Principal (verde)” to have the same sticker behaviour. The only difference would be that when it is overlapping, the letters should be green (#10514e) instead of white. If you could help me with that, I would be glad! Thanks in advance.

2. I figured it would be something like that. Thanks for clarifying. I created a new header called “Menu Loja (cinza)”. Is it possible to create a CSS rule to display the header with a grey background color (#fafafa) so it looks like it is overlapping the content, but when it turns into sticky, the desired white background appears?

Again, thanks for your cooperation and patience.

Hello,
1- Sorry to say this but you didn’t mention the Page on which you have applied the Header “Menu Principal (Verde)”, we tried to find it ourselves but weren’t able to do so. Could you please share that exact Page URL with us so that we can try to provide the CSS accordingly for that?

2- For the Menu Loja concern, to make its background color without Sticky to the one you mentioned, please try out the following Custom CSS on your Site:

body:not(.single-product) .whb-header_925045.whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) {
   background: #fafafa !important;
}

But as far as we are seeing the Archive pages on your Site other than the Single Product page, without Sticky Header is appearing as Transparent which is completely working fine in terms of overlap content.

Location to paste the Custom CSS is the same as told earlier.

Best Regards

Hello! Hope you find this new year an opportunity for growth! Happy New Year!

1. “Menu Principal (verde) is being applied on the home page: https://suri-ecostore.com

2. My idea was to apply that rule solely to the Single Product page (precisely because the other Archive pages are working great!). The rule you sent me does the opposite – it applies the color to the Archive pages, but not to the Single Product page.

Thanks, again, for your help.

Hello,

1- The Menu Principal (Verde) change has been done accordingly on your Site as mentioned with the help of the following Custom CSS applied:

body:not(.single-product) .whb-header_734029.whb-overcontent:not(.whb-sticked) .whb-row:not(.whb-with-bg) .wd-nav li a span {
    color: #10514e !important;
}

2- On the Single Product page, the required change related to Header has been done with the help of the following Custom CSS applied:

.single-product .whb-row.whb-general-header {
    background-color: #fafafa !important;
}

.single-product .whb-sticky-shadow.whb-sticked .whb-row:last-child {
    background-color: #fff !important;
}

Location to find the Custom CSS is the same as told earlier.

Please check back your Site after completely clearing the browser and server cache.

Best Regards

PERFECT! Exactly what I wanted.
I can’t thank you enough! Excellent job!

Thanks and Happy New Year!

Most Welcome 🙂

If you do not mind, can you please leave 5 stars rating for our theme by going here: http://themeforest.net/downloads It will allow us to release more updates and provide dedicated support in future. It would encourage our work a lot. If you like our Theme and Support.

Have a great day 🙂

Topic Closed.
Best Regards.

[Author]

Posts