• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Links Not Working In Fixed Header CSS

New Here ,
Jan 16, 2020 Jan 16, 2020

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! 

TOPICS
Code

Views

2.9K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jan 17, 2020 Jan 17, 2020

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

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 17, 2020 Jan 17, 2020

Copy link to clipboard

Copied

LATEST

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 & Moderator

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines