I've been looking for answers on here and several other sites on this. There have been some, but I can't seem to get it to work still. I have the following navbar:
<nav class="navbar">
<a href="#About">About me</a>
<a href="#Education">Education</a>
<a href="#Portfolio">Portfolio</a>
<a href="#Contact">Contact</a>
</nav>
I've tried it with and without a div container on the inside of the nav tags.
Here's the corresponding CSS:
nav {
text-align: center;
position: fixed;
top: 0;
lef: 0;
right: 0;
height: 35px;
padding-top: 15px;
box-shadow: 0px 0px 8px 0px;
-webkit-box-shadow: 0px 0px 8px 0px;
-moz-box-shadow: 0px 0px 8px 0px;
background-color: gray;
width: 100%;
z-index: 100;
}
I've also tried it without z-index: 100; If anyone knows what I'm missing, or if I need something else to add, I'd be interested in seeing what it is and where I can read up on it so I get it.
Thanks :)
You have a CSS rule for calss .navbar in there with position: relative. This overrides the fixed setting for nav
Add !important to your position:fixed setting for nav:
nav {
text-align: center;
position: fixed !important;
etc.
This should fix it.