Skip to main content
B
bookwormqueen
Participant
January 17, 2020
Question

Links Not Working In Fixed Header CSS

  • January 17, 2020
  • 2 replies
  • 3281 views

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! 

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
January 17, 2020

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

 

 

Nancy O'Shea— Product User & Community Expert
    O
    osgood_
    Legend
    January 17, 2020

     

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

     

     

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices