Sticky menu background color

Hey again,

Wondering if you can post the CSS to change the menu background color when sticky. I checked some earlier posts here in support, but the CSS isn’t working..sorry for the bother.

URL is posted in private, when you scroll down, it’s transparent like on landing/top (which is good), but I’d like the background when sticky to be white, and the main nav links to be black.

Thank you!

Hello,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS. Change the color code as per your requirements.

.whb-sticky-shadow.whb-sticked .whb-row:last-child {
    background-color: white!important;
}
.whb-sticked .wd-nav[class*="wd-style-"]>li>a,
.whb-sticked .wd-nav[class*="wd-style-"]>li>a:hover,
.wd-header-html .btn-style-bordered.btn-color-white{
    color: #0e0e0e !important;
}

Best Regards,

Hey again, thank you, applied the CSS but no change.. The sticky menu is still transparent, and the text remains white.

Hello,

Sorry to hear about the inconvenience. Kindly please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and give you a possible solution.

Best Regards,

No problem, please see private section for login.

Please let me know what you end up changing, thank you!

Hello,

Your issue has been resolved. Please revisit your site and verify. The problem was due to a missing closing curly brace (})on line 20 of the CSS block.

Best Regards,

That did it, thanks!!

So one thing I’m noticing is that in the Header editor, you can swap between Mobile and Desktop for the layout, but the background colour settings are set for both… (So in my case, the transparent is ‘top’ on both Mobile and Desktop).

My preference is that Mobile would be all-white, so both white Top and white Sticky…. I’ve been looking at the CSS but can’t find any differentiation, so hoping for a bit more help with that!

Thank you!

Hello,

To make the mobile header always white (both top and sticky), while keeping the desktop header transparent on top and white when sticky, you can use the following CSS for mobile.

Add the below Custom CSS code to Theme Settings > Custom CSS > Custom CSS for mobile:

.whb-general-header {
    background-color: white !important;
  }

Best Regards,

Hey again – unfortunately that transforms both the Desktop and Mobile ‘Top’ menu background to white.

Just looking to change the Mobile background, but leave the Desktop as it is (transparent.)

Thanks!

Hello,

You need to add this code in the mobile Custom CSS area: https://ibb.co/h6TWWqq

Then it will work only on mobile: https://ibb.co/ksMJvjLS

Now I have added this code to your site and it is working only on mobile. Check back your site and check the issue.

Best Regards,

Ahh sorry, didn’t see you mention the Mobile area, totally forgot about that spot.

It’s still not actually working – when I’m logged in, it works. But if you visit the page when not logged in, it doesn’t work, and still comes up transparent. (I’ve cleared the cache as well.)

Any idea why that’s happening?

Hello,

I’ve checked your site on a mobile device while logged out, and the background appears to be displaying correctly.
See Screenshot for clarification: https://ibb.co/tTQcyhsK

Check back your site after completely clearing the browser cache and check the issue.

Best Regards,

Ahh thank you, that’s odd, I checked quite a while after you updated, but I guess the caching didn’t clear. That’s great thanks again!

Hello,

You’re very welcome! I’m glad I could help. If you need anything else, feel free to reach out!

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards,

[Author]

Posts