css navigation bar position fixed not working

Question

I am trying to make a website. I decided to make the navigation bar have a fixed position so when I scroll down I can always see it but, when I add to the nav element the property position:fixed it just disappears. Cant' figure out what's happening. Can someone explain, what I'm doing wrong? Thank you very much! PS: I am new to coding.

HTML and CSS

 * { box-sizing: border-box; padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } header nav #logo { width: 140px; position: absolute; top: 15px; } nav { position: relative; background-color: #242628; height: 70px; padding-left: 20px; } nav ul { position: absolute; height: 100%; margin: auto; top: 0; bottom: 0; width: 600px; padding-left: 200px; } nav ul li { -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; display: inline; float: left; height: inherit; width: 100px; border-right: 1px solid gray; } nav ul li:hover { background-color: rgba(12, 240, 255, 0.3); } nav ul li a { color: white; text-decoration: none; position: absolute; height: inherit; width: inherit; text-align: center; padding-top: 25px; } 

 <header> <nav> <img id="logo" src="images/logo.png" alt="logo" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">Rate it!</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Videos</a></li> </ul> </nav> </header> 

Answer 1

Once you fix the position you have to specify where you want it.

top: 20px; left: 0px;

Etc....

Answer 2

You have to add a width to fixed elements (100% in this case):

 * { box-sizing: border-box; padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } header nav #logo { width: 140px; position: absolute; top: 15px; } nav { position: fixed; width: 100%; background-color: #242628; height: 70px; padding-left: 20px; } nav ul { position: absolute; height: 100%; margin: auto; top: 0; bottom: 0; width: 600px; padding-left: 200px; } nav ul li { -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; display: inline; float: left; height: inherit; width: 100px; border-right: 1px solid gray; } nav ul li:hover { background-color: rgba(12, 240, 255, 0.3); } nav ul li a { color: white; text-decoration: none; position: absolute; height: inherit; width: inherit; text-align: center; padding-top: 25px; } 

 <header> <nav> <img id="logo" src="images/logo.png" alt="logo" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">Rate it!</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Videos</a></li> </ul> </nav> </header> 

Answer 3

If your nav is set to realtive and is changed to fixed your absolute elements will be relative to the body and those elements will leave the nav .

Change the position of the absolute elements and the css of the nav to:

nav {
    background-color: #242628;
    height: 70px;
    padding-left: 20px; }
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

Answer 4

I let you here a working version. I only replaced relative with fixed in your code to the nav

 * { box-sizing: border-box; padding: 0; margin: 0; } html, body { width: 100%; height: 300%; } header nav #logo { width: 140px; position: absolute; top: 15px; } nav { position: fixed; background-color: #242628; height: 70px; padding-left: 20px; } nav ul { position: absolute; height: 100%; margin: auto; top: 0; bottom: 0; width: 600px; padding-left: 200px; } nav ul li { -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; display: inline; float: left; height: inherit; width: 100px; border-right: 1px solid gray; } nav ul li:hover { background-color: rgba(12, 240, 255, 0.3); } nav ul li a { color: white; text-decoration: none; position: absolute; height: inherit; width: inherit; text-align: center; padding-top: 25px; } 

 <header> <nav> <img id="logo" src="images/logo.png" alt="logo" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">Rate it!</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Videos</a></li> </ul> </nav> </header> 

Note that I set height to 300% to have some scroll on the document

Answer 5

I honestly don't see anything wrong:

http://codepen.io/anon/pen/BWpLdd

.scrollTest {
  height: 2000px;
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}
* {
     box-sizing: border-box;
     padding: 0;
     margin: 0; }

html, body {
     width: 100%;
     height: 100%; }

header nav #logo {
     width: 140px;
     position: absolute;
     top: 15px; }

nav {
     position: fixed;
     background-color: #242628;
     height: 70px;
     padding-left: 20px;
     width: 100%;
}

nav ul {
     position: absolute;
     height: 100%;
     margin: auto;
     top: 0;
     bottom: 0;
     width: 800px;
     padding-left: 200px; }

nav ul li {
    -moz-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    display: inline-block;
    height: inherit;
    width: 100px;
    border-right: 1px solid gray; }

nav ul li:hover {
    background-color: rgba(12, 240, 255, 0.3); }

nav ul li a {
    color: white;
    text-decoration: none;
    position: absolute;
    height: inherit;
    width: inherit;
    text-align: center;
    padding-top: 25px; }

Make sure you're adding it to the nav parent element.

Answer 6

 * { box-sizing: border-box; padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } header nav #logo { width: 140px; position: absolute; top: 15px; } nav { position: fixed; background-color: #242628; height: 70px; padding-left: 20px; width: 100%; background-color: black; } nav ul { position: relative; height: 100%; margin: auto; top: 0; bottom: 0; } nav ul li { -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; transition: all 0.2s linear; display: inline; float: left; height: inherit; width: 200px; border-right: 1px solid gray; } nav ul li:hover { background-color: rgba(12, 240, 255, 0.3); } nav ul li a { color: white; text-decoration: none; position: absolute; height: inherit; width: inherit; text-align: center; padding-top: 25px; } article{ height: 500px; } 

 <header> <nav> <img id="logo" src="" alt="logo" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">Rate it!</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Videos</a></li> </ul> </nav> </header> <article></article> 

Working code