Sticky Header Color

Hi Paul

Thanks for your support, glad to hear Ultra has been useful.

Please remember not to edit style.css directly as all WP themes overwrite their theme folder during updates. Let me know if you need help recovering from a style.css edit situation.

Using a plugin like Simple Custom CSS you can try the following:

/* Header */

.site-header { 
	background: #ffffff; 
}

@media (min-width: 1024px) { 
	.overlap .site-header:not(.fixed) { 
		background: rgba(255, 255, 255, 0.9); 
	} 
	.site-header.site-header-sentinel.fixed { 
		background: rgba(255, 255, 255, 0.9); 
	} 
}

Edit as required. #ffffff is white and so is 255, 255, 255 (RGB). 0.9 is opacity. Change that to 1 to remove opacity.

Here is a hex (#ffffff) to RGB (255, 255, 255) tool if you need it: http://hex.colorrrs.com/.

Let me know how you come along.

Quick follow-up to see how this went 🙂 Let me know if you need any further help.

Andrew,

I am sorry for the delay in my response. That worked like a charm. Seemed like I had half of what I needed

Thank you again for a quick response.

— Paul.

No problem.

Awesome 🙂 Really glad to hear that did the trick.

If anything else comes up, please, let me know.

Cheers for now.

Hey Andrew,

I updated the theme and now the header is not keeping the same color across both states. Is there anything that I need to change that is different than the solution you gave me above? FYI – I am using a child theme, which I thought would prevent me from having to change things on updates.

Thank you again for any help,

— Paul Grenier

Hi Paul

Sorry to hear about the hassle.

Is the Custom CSS we previously inserted still saved in your Custom CSS plugin or child theme style.css file?

If you just upgraded from free to premium, please, check what you have set at Appearance > Customize > Theme Design > Header > Header Background Color.

I’m just guessing at the moment. If you’d like to send a link to your site you can use the Set as private reply checkbox below the comment field. I should be able to find the problem quite quickly then.

Thanks

It is in the child theme style.css.

Thanks for the update; I’d need to take a look to try figure out what’s happened.

Meaning at the site? Or is there another way that I can send you the files or excerpts from the code? The site is currently hidden because it does not have approval to be visible to the public yet.

These kind of CSS problems are really easy to inspect using Chrome Developer tool. Each browser has it’s own developer tool. So, unfortunately, without inspecting the site, I’ll just be guessing as to what the problem is. I’m online now, if you’d like you could take the site out of maintenance mode for 5mins and send the link privately using the Set as private reply checkbox below.

This reply has been marked as private.

Apologies for the hassle. Please, can we try this in your child style.css file:

.site-header.site-header-sentinel.fixed {
	background: rgba(104, 95, 69, 0.9);
}

Sorry, let’s make it:

.site-header.site-header-sentinel.fixed {
	background: rgba(104, 95, 69, 0.9) !important;
}

Andrew! once again you are amazing. Thank you again for your help!