Links Not Working In Fixed Header CSS

[bookwormqueen]

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! 

[osgood_]

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;
}

[Nancy OShea]

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;
}