Sticky header colors

This topic has 15 replies, 2 voices, and was last updated 1 year, 10 months ago by Aizaz Imtiaz Awan.

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
December 28, 2022 at 3:29 pm #431804

daniel.leal
Participant

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.

December 29, 2022 at 10:35 am #431965

Aizaz Imtiaz Awan
Keymaster

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

December 29, 2022 at 12:32 pm #431994

daniel.leal
Participant

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.

December 29, 2022 at 4:12 pm #432075

Aizaz Imtiaz Awan
Keymaster

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

December 29, 2022 at 6:54 pm #432123

daniel.leal
Participant

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.

December 29, 2022 at 7:31 pm #432126

daniel.leal
Participant

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

December 29, 2022 at 7:50 pm #432128

daniel.leal
Participant

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

December 30, 2022 at 12:58 pm #432255
Aizaz Imtiaz Awan
Keymaster
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
December 30, 2022 at 1:23 pm #432260

daniel.leal
Participant

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!

December 30, 2022 at 4:19 pm #432298

Aizaz Imtiaz Awan
Keymaster

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.

December 30, 2022 at 6:55 pm #432322

daniel.leal
Participant

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.

December 31, 2022 at 12:01 pm #432381
Aizaz Imtiaz Awan
Keymaster
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
January 2, 2023 at 1:03 pm #432584

daniel.leal
Participant

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.

January 2, 2023 at 3:07 pm #432609
Aizaz Imtiaz Awan
Keymaster
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
January 2, 2023 at 4:08 pm #432618

daniel.leal
Participant

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

Thanks and Happy New Year!

January 2, 2023 at 4:26 pm #432626

Aizaz Imtiaz Awan
Keymaster

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