Currently in the process of designing a custom WP theme, I have encountered an issue with styling the header links as seen in the image. Despite my attempts to fill the bluish gradient area with a black background using the .current class, the desired effect has not been achieved:
.current {background-color: black; color: rgb(242, 245, 238); padding-top: 65px;}
Accompanied by an image:
I have refrained from utilizing CSS-reset and have thoroughly examined the overflow attributes across the encapsulating divs within the list, but to no avail.
Here is the corresponding HTML code:
<div id="container" class="">
<div id="header" class="shadow">
<div id="logoContainer">
<span class="helper"></span><img src="img/tdw_logo_serif.png" alt="The Digital Warehouse">
<div id="links">
<ul class="helper">
<li><span class="helper"></span>HOME</li>
<li class="current"><span class="helper"></span>BLOG</li>
<li><span class="helper"></span>PORTFOLIO</li>
<li><span class="helper"></span>CONTACT</li>
</ul>
</div>
</div>
</div>
...
</div>
The associated CSS code for reference:
#container {
}
#header {
top: 0;
left: 0;
right: 0;
height: 35px;
overflow: visible;
background-color: rgb(242, 245, 238);
color: rgba(5, 0, 18, 1.00);
z-index: 100;
} .willStick {
position: absolute;
padding-top: 65px;
} .didStick {
position: fixed;
padding-top: 0;
}
#logoContainer {
position: relative;
height: 35px;
padding-left: 60px;
padding-right: 60px;
width: 900px;
margin: auto;
overflow: visible;
}
#logoContainer img {
margin: 0;
padding: 0;
height: 35px;
vertical-align: middle;
display: inline-block;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
#links {
position: relative;
float:right;
display: inline-block;
vertical-align: middle;
margin: 0;
padding: 0;
height: 35px;
overflow: visible;
}
#links ul {
margin: 0;
padding: 0;
display: inline-block;
font-size: 0.7em;
font-weight: 800;
font-family: "jaf-bernino-sans-condensed", "proxima-nova", sans-serif;
text-transform: uppercase;
list-style-type: none;
overflow: visible;
}
#links li {
width: 90px;
height: 35px;
border: 0;
margin: 0;
padding: 0;
display: inline-block;
float: left;
text-align: center;
overflow: visible;
}
Any assistance or suggestions would be greatly appreciated.