Community Forums › Forums › Archived Forums › Design Tips and Tricks › Ambiance Pro Header/Nav Issues
Tagged: ambiance pro, css
- This topic has 13 replies, 3 voices, and was last updated 9 years, 2 months ago by NathanBWeller.
-
AuthorPosts
-
February 6, 2015 at 1:51 pm #139963NathanBWellerMember
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/February 6, 2015 at 2:04 pm #139965emasaiParticipantThe 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.comFebruary 6, 2015 at 2:06 pm #139967NathanBWellerMemberOh 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.
February 6, 2015 at 2:09 pm #139968KrishanMemberWell, 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.comFebruary 6, 2015 at 2:10 pm #139969emasaiParticipantWell 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.comFebruary 6, 2015 at 2:21 pm #139972NathanBWellerMemberHi 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.
February 6, 2015 at 2:31 pm #139975emasaiParticipantIt 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.comFebruary 6, 2015 at 2:39 pm #139978NathanBWellerMemberI want it to be blue-grey.
February 6, 2015 at 2:44 pm #139979emasaiParticipantIt 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.comFebruary 6, 2015 at 3:00 pm #139981NathanBWellerMemberI'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.
February 6, 2015 at 3:37 pm #139986emasaiParticipantI 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.comFebruary 6, 2015 at 4:34 pm #139993NathanBWellerMemberFirst 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.
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.
February 6, 2015 at 5:28 pm #139994emasaiParticipantOK, 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.comFebruary 6, 2015 at 6:00 pm #139998NathanBWellerMemberPerfect! Made that change and now it works exactly like I was hoping it would. Thank you again for sticking with me!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.