Highlighted

Links Not Working In Fixed Header CSS

New Here ,
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

183

Likes

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

Links Not Working In Fixed Header CSS

New Here ,
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

184

Likes

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
Jan 16, 2020 0
LEGEND ,
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;
}

 

 

Likes

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
Reply
Loading...
Jan 17, 2020 1
Adobe Community Professional ,
Jan 17, 2020

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

 

 

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

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
Reply
Loading...
Jan 17, 2020 1