Where is the background value coming from?
HI - I have a strange issue I can't seem to crack. On several WordPress sites using the same stack and template, I've made the navigation semi-transparent in order see the video behind the navigation. This works great on other sites, but a new site I'm building manages to place some kind of light grey backgrounded object behind the navigation, foiling the transparent effect.
I've placed the semi-transparent nav bar at half the correct height, which then displays what's going on. If I set the transparent nav bar to it's full, correct height value, there is a light grey background that I cannot locate the source of.
Right now I've placed the nav bar height at half the correct value. I also have a -68px margin-top value to give an idea of what I'm trying to do. However if the height and margin are both set to 135px and -135px respectively, it looks exactly right at page load, but the menu offset doesn't work once you scroll down the page.
At any rate, if I can just figure out how to "disable" that light grey, I can worry about the rest. Any idea what's going on here? Firebug is not helping.
Here is the staging area:
http://hobbyhorse.coloradowebdesign.com
Bill
I've placed the semi-transparent nav bar at half the correct height, which then displays what's going on. If I set the transparent nav bar to it's full, correct height value, there is a light grey background that I cannot locate the source of.
Right now I've placed the nav bar height at half the correct value. I also have a -68px margin-top value to give an idea of what I'm trying to do. However if the height and margin are both set to 135px and -135px respectively, it looks exactly right at page load, but the menu offset doesn't work once you scroll down the page.
At any rate, if I can just figure out how to "disable" that light grey, I can worry about the rest. Any idea what's going on here? Firebug is not helping.
Here is the staging area:
http://hobbyhorse.coloradowebdesign.com
Bill
ASKER
I'm sorry - I'm not being clear. I did that intentionally because "covering" the gray area is not the goal. That gray area shouldn't show up at all. But if I set the height and margin properly, my green band covers the gray - rather than being able to see through it. I've just set it back. If you notice, when scrolling, the top bar is semi-transparent, but at page load, at the top of the page, that gray bar is behind it. I agree that I thought it was the body background color, but why on earth is that coming through above the slider video?
The gray area is there originally because it is the body's background color. Where there is nothing else to render, the body shows through. The half-height green bar with full height inner content created that space for the body to peek through the other content.
I did not see any gray at the top of the page during page load. I'm guessing that its appearance is related to the video content not being available yet, so again, the body is visible.
You have since changed the CSS, and I no longer see the gray area at all. Is the site still exhibiting issues? If so, perhaps a screen capture or video describing the problem may help.
I did not see any gray at the top of the page during page load. I'm guessing that its appearance is related to the video content not being available yet, so again, the body is visible.
You have since changed the CSS, and I no longer see the gray area at all. Is the site still exhibiting issues? If so, perhaps a screen capture or video describing the problem may help.
ASKER
Steve the gray area is now preventing the semi-transparent green navigation bar from letting the bottom of the video through.
That's what I'm saying. The gray is there, behind the green bar currently. I changed the CSS back to what I thought it SHOULD be to have the nav bar correctly positioned above the bottom of the video, but semi-transparent.
Instead the gray bar is behind the nav bar still and it's blocking the bottom of the video entirely, which is why it confuses me that it's the body background that is doing this. I don't think that could be the case, could it?
That's what I'm saying. The gray is there, behind the green bar currently. I changed the CSS back to what I thought it SHOULD be to have the nav bar correctly positioned above the bottom of the video, but semi-transparent.
Instead the gray bar is behind the nav bar still and it's blocking the bottom of the video entirely, which is why it confuses me that it's the body background that is doing this. I don't think that could be the case, could it?
ASKER
So the question is, what would you do with the current elements to be able to see through the green nav bar to the video playing behind it?
Is the green bar supposed to be wholly over the video, or should it be half on/half off like it was originally?
FYI, the gray is not preventing translucency over the video. The green bar is no longer positioned over the video. If you remove the header element entirely, you'll the video is still there in its entirety.
FYI, the gray is not preventing translucency over the video. The green bar is no longer positioned over the video. If you remove the header element entirely, you'll the video is still there in its entirety.
ASKER
Hi Steve,
I promise you the green bar is over the video. If I inspect element, just like you said, and remove the entire header section, the green bar disappears and an extra inch of video at the bottom of my non-scrolled browser window is revealed. And I said it was half-on and half-off to demonstrate the gray bar and what it was doing. I made it like that in order to ask this question.
The green nav bar should appear at the bottom of the browser window, over the bottom inch or so of the video, and be semi-transparent, just like it is if you scroll down into the content.
Does that make sense?
So the question is, what would you do with the current elements to be able to see through the green nav bar to the video playing behind it?
I promise the video is playing behind it. The horse hoofs are there in the real video. If it makes a difference, I'm looking at full screen mode on a 1400px wide monitor.
Bill
I promise you the green bar is over the video. If I inspect element, just like you said, and remove the entire header section, the green bar disappears and an extra inch of video at the bottom of my non-scrolled browser window is revealed. And I said it was half-on and half-off to demonstrate the gray bar and what it was doing. I made it like that in order to ask this question.
The green nav bar should appear at the bottom of the browser window, over the bottom inch or so of the video, and be semi-transparent, just like it is if you scroll down into the content.
Does that make sense?
So the question is, what would you do with the current elements to be able to see through the green nav bar to the video playing behind it?
I promise the video is playing behind it. The horse hoofs are there in the real video. If it makes a difference, I'm looking at full screen mode on a 1400px wide monitor.
Bill
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks
The div.x-navbar element has a specific height of 68px, but also margin-top:-68px. However, the inner content is 135px...the grey area is where the other 67px is. Since that inner content does not assign a background color, the body background color shows through. If you put the green background on div.x-navbar-inner instead, that grey area becomes green. Alternatively, setting div.x-navbar with height:135px (the height of the actual content it holds), the grey area is also covered.