Header color

This topic has 7 replies, 2 voices, and was last updated 2 years, 5 months ago by Aizaz Imtiaz Awan.

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

Author

Posts
June 7, 2022 at 5:40 pm #381733
juliette
Participant
Hello support team,

I currently have a white header.
I would like to have it transparent and then white when people are scrolling down (sticky header).

1/ For the transparent color, I haven’t found how to do it. Can you please help me on this?
2/ For the color of the sticky header, I found the code below in another topic. Is this correct?
```
body .whb-sticked .whb-general-header {
background-color: white;
}
```
If helpful, you’ll find below login codes.
Thank you!
June 8, 2022 at 9:52 am #381829

Aizaz Imtiaz Awan
Keymaster

Hello,

1) Please Go to Woodmart >> Header Builder >> Edit header and enable Header overlap.

Screenshot: https://gyazo.com/7d9f30943697646ab4f7cab57ef19e10

2) Yes the CSS is correct, you can use it.

Best Regards

June 8, 2022 at 11:44 am #381873

juliette
Participant

Hello Aizaz,

It works well. However now the content of all my pages starts at the top of the screen behind the header. Is there a way to make all content start just below the header (and still be able to use negative margin for the content that I want to overlap with the header)?

Thank you!

June 8, 2022 at 2:53 pm #381921

Aizaz Imtiaz Awan
Keymaster

Hello,

You are Most Welcome.

If we try to move the content down then the header background will be white again.

Best Regards

June 8, 2022 at 6:20 pm #381985

juliette
Participant

Hello Aiziz,

Thank you for your input.

I tried the custom CSS below that I found on another topic to set a margin at the top of my pages. It works well on all pages except on product pages where I have a very large margin at the top (see screenshot). Do you know why is that and how to fix this please?

If helpful I leave the website logins below.
Thank you

Attachments:
You must be logged in to view attached files.

June 9, 2022 at 10:37 am #382106
Aizaz Imtiaz Awan
Keymaster
Hello,

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.
```
.single-product .main-page-wrapper {
    padding-top: 40px;
}
```
Best Regards
June 9, 2022 at 11:53 am #382138

juliette
Participant

Hello Aizaz,

I tried this code but it didn’t work at first. However I changed padding-top to margin-top and everything works fine now.

Thank you!

June 9, 2022 at 2:55 pm #382220

Aizaz Imtiaz Awan
Keymaster

Hello,

We are Glad that your issue has been Resolved.

Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Have a wonderful day.

Topic Closed.
Best Regards.
Author

Posts