Copy link to clipboard
Copied
Hi, I'm a super beginner and I coded my own website, which has been up for a while now. I am now trying to create a sticky (fixed) header so that it stays on top while people scroll. However, whenever I include position:fixed in my .header CSS the links on my header stop working.
This is my CSS:
.header {
background-color:#B6DCE3;
width:100%;
height:70px;
align-content:center;
position:fixed;
}
ul {
text-align:center;
align-content:center;
margin:0px;
padding:0px;
font-family:"Open Sans", "Roboto", "Helvetica Neue";
font-size:20px;
font-weight:300;
}
li {
display:inline;
color:#0020B7;
text-align:center;
}
li a:hover {
color:#FFFFF;
}
And here is my HTML:
<div class="header">
<br>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
For some reason when I remove position:fixed; from the CSS the links will work. But when I put it in, the links are gone and it doesn't follow the hover command either.
If someone knows what I am doing wrong, I'd greatly appreciate help please. Thanks!
Copy link to clipboard
Copied
Try adding 'z-index: 200;' to the header css (see css below - sometimes that has the desired effect). If not then you need to post the rest of your pages code as I can see nothing in the code/css you posted that would disable the links.
Maybe get rid of the height on the header as well and use some padding instead. Its never a good idea to add height to a container as this can cause issues unless you know what you are doing. You dont need the <br> tag either which you curently have just after your opening <ul> tag.
.header {
background-color:#B6DCE3;
width:100%;
padding:25px;
align-content:center;
position:fixed;
z-index: 200;
}
Copy link to clipboard
Copied
You should also position your header -- top, bottom, left, right. Adjust values as needed.
.header {
background-color:#B6DCE3;
width:100%;
position:fixed;
top:0;
left:0;
z-index:1000;
}