Where do you have the header color background changed to black? If I load up the theme and change the header color in Appearance->Customize->Header Colors and change the ‘Header background color’ value to black and make the header sticky it remains black when scrolling down for me after saving the changes and refreshing the site.
If you have that set and it still isn’t working I would try the following in the Additional CSS
.site-header, .header-default .site-header.fixed-header {
background-color: #000000;
}
Which should force it to black.
Hi Jarret,
Thank you for your reply. Yes that is how I had it set and it wasn’t working. I’ve now added your Additional CSS and updated and viewed and I’m sorry to say it’s still doing the same thing and scrolling to white! What is going on? If you’d like me to send you screenshots please tell me where and how I can do this.
Many thanks
Tracy
Hello Tracy, could you please provide a direct link, if available? Seeing the live code will help me locate the source of the problem more efficiently. Thanks!
Hi – I’ve got the site behind a Coming Soon page and I don’t want to make it live as I don’t want client to see it! Can I add you as a user so you can go in? If so, what email address should I add and how best to get that to you?
Thank you!!
Hello – haven’t heard back on this but have since found out a clue. When I set the menu to the default top right-aligned, the header doesn’t scroll to white, it stays on the colour that is set in the Appearance->Customize->Header Colors – but when it’s set to ‘Centred’ which is how I had it, then it scrolls to white, even when you’ve got the added CSS provided above. Hope that helps solve the problem.
Apologies for the delayed response! You can contact me at support[at]satoristudio.net in case you don’t want to reveal your client’s URL here. Thanks for your patience!
Thanks for the details! Please change the custom CSS to this one in order for it to take effect:
.site-wrapper .site-header.fixed-header {
background-color: #3D0B40 !important;
}
Fantastic! That worked thank you very much 🙂
One more question: on scrolling on the page, isn’t the logo meant to scale down a little in size or am I thinking of another theme that does that?
Bento doesn’t offer such functionality right now, but you can try this snippet to improvise something similar:
.site-header.fixed-header img.logo-fullsize {
max-width: 180px;
}
This is why I LOVE Bento and the support you give! Thank you so much. That’s amazing!!
