Ambiance Pro Header/Nav Issues

[NathanBWeller]

I recently received some help here concerning how to change my header color in the Ambiance Pro theme. I changed it from a 50% transparency black to a 50% transparency blue.

However, the next time I logged in, the color had reverted to the original even though the code in my child theme remained changed. Any ideas on what's going on?

Original code:

.site-header,
.single-post .site-header.shrink,
.site-header.shrink {
	background-color: rgba(0,0,0,0.5);
}

My edited code:

.site-header,
.single-post .site-header.shrink,
.site-header.shrink {
	background-color: rgba(21,25,56,0.5);
}

Additionally, the header is supposed to be sticky as you scroll down the page. For some reason this only happens occasionally. Does anyone know why this feature only works sporadically?

http://www.wonderkinweekly.com/

[emasai]

The code in your css file has an extraneous ! after the rgba(21,25,56,0.5)!
Remove it to see your header.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[NathanBWeller]

Oh yeah, I meant to remove that earlier because it didn't do anything to solve the problem. I just deleted the exclamation point and re-saved. Unfortunately I'm still not seeing the right color.

[Krishan]

Well, I am not able to see any header on http://www.wonderkinweekly.com/ but it appears on http://www.wonderkinweekly.com/storytelling-rights/.

The most viable reason behind changes not showing up; is that you have cache plugin installed. You might have to deactivate or sometimes delete it to see the changes happening.

To make the header stick; see if you have:

.site-header,
.single-post .site-header.shrink,
.site-header.shrink {
position: fixed;
}

Thanks

---

Kulwinder Krishan
I love helping people with Any Genesis Theme Customizations.
Check my website at http://www.ew3tech.com

[emasai]

Well I can see a pale shade of blue/grey, so you need to clear cache either in your browser or on your site if you have a caching plugin activated. Not a good idea to have a caching plugin when you are still developing a site, and really only useful when you have a lot of posts or images.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[NathanBWeller]

Hi Krishan and emasai,

I do not have a caching plugin installed, let alone activated. So that is not the problem.

Here is the full code for my header:

/*
Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

.site-header,
.single-post .site-header.shrink,
.site-header.shrink {
	background-color: rgba(21,25,56,0.5);
}

.single-post .site-header  {
	background-color: transparent;
}

.site-header,
.single-post .site-header.shrink,
.site-header.shrink {
	position: fixed;
}

.admin-bar .site-header.shrink {
	top: 32px;
}

.site-header .wrap {
	padding: 40px 0;
}

.header-image .site-header.shrink .wrap,
.site-header.shrink .wrap {
	padding: 10px 0;
}

Krishan, when I added that bit you gave me it brought the sticky feature back. Thanks! (Still not sure why it would have stopped working in the first place.)

I think you can see now, particularly on this page (http://www.wonderkinweekly.com/storytelling-rights/), that when you scroll down the sticky header/menu has a noticeably different color than it does before the scroll. It goes from a plain gray to a transparent blue. It also has a bit of hitch in the animation that wasn't there before.

[emasai]

It is only showing that color because the background further down is white. While it is over a darker background such as the image, the color of the image shows through the transparency and modifies the color. So which color do you want the blue-grey or the grey?

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[NathanBWeller]

I want it to be blue-grey.

[emasai]

It is blue-grey, but as you are using transparency it changes color over a darker background. To avoid that forget about the transparency and change the color to solid

.site-header,
.single-post .site-header.shrink,
.site-header.shrink {
	background-color: #898B9B;
}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[NathanBWeller]

I'd actually like to keep the transparency effect. It does not appear to be the issue. If you notice, at the moment (with code change you just recommended), the color changes when you begin to scroll down the page from plain gray to blue-gray.

http://www.wonderkinweekly.com/storytelling-rights/

My ideal would be for the header to always be blue-gray when stationary and become a transparent blue when scrolling.

I had achieved this affect last night by simply changing the rgba code but for some reason when I logged back in today the color had reverted.

[emasai]

I had achieved this affect last night by simply changing the rgba code but for some reason when I logged back in today the color had reverted.

Except you might not have scrolled down the page, or cleared your browser cache.

If you notice, at the moment (with code change you just recommended), the color changes when you begin to scroll down the page from plain gray to blue-gray.

No it does not. It's a solid color it cannot change when you scroll it always stays the same. If you want transparency you will have to live with the fact that it is influenced by the background on which it appears. That is the beauty of transparency.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[NathanBWeller]

First of all, I'd just like to say that I'm really appreciative of you for offering up your advice and fixes. I want to make sure you know I'm not trying to be adversarial when I report back that a fix you gave isn't working for me.

I created a little screen capture video to show you what is going on since I don't appear to be able to explain it.

http://www.youtube.com/watch?v=q53vT1nmtvw

I think it is pretty clear that the color of the header when stationary is a plain grey. When I begin to scroll the color changes to a blue-grey.

And just so we are clear. Yes, I have cleared my browser cache. I do not have a caching plugin installed on my website. And the code has not changed or been altered beyond the fixes we have discussed in this thread.

[emasai]

OK, thanks for the clarification, I was not seeing the same thing as you because I am on a desktop. The issue you are seeing only happens at 1230px width and below. This is coming from the media queries at this width where, for some reason the original transparency color is repeated. Normally, media queries only modify the elements that need changing, everything else that stays the same should not be repeated. If you modify this to the new transparency code, it should resolve your issue.

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[NathanBWeller]

Perfect! Made that change and now it works exactly like I was hoping it would. Thank you again for sticking with me!

[Author]

Posts