css navigation bar position fixed not working - html

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!
P.S: 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>Home</li>
<li>Rate it!</li>
<li>Courses</li>
<li>Videos</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>Home</li>
<li>Rate it!</li>
<li>Courses</li>
<li>Videos</li>
</ul>
</nav>
</header>

Answer 3

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>Home</li>
<li>Rate it!</li>
<li>Courses</li>
<li>Videos</li>
</ul>
</nav>
</header>
Note that I set height to 300% to have some scroll on the document

Answer 4

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 5

* {
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>Home</li>
<li>Rate it!</li>
<li>Courses</li>
<li>Videos</li>
</ul>
</nav>
</header>
<article></article>
Working code

Answer 6

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