I want my .nav
to be fixed and scroll with you down the page, but I have no idea how to stop it from messing up when position: fixed; is put in.
JSFIDDLE without position:fixed
<div class="top">
<p id="day"></p>
<script> {
var d = new Date();
var n = d.getDate();
document.getElementById("day").innerHTML = n;
}
</script>
/
<p id="month"></p>
<script> {
var d = new Date();
var n = d.getMonth();
document.getElementById("month").innerHTML = n;
}
</script>
/
<p id="year"></p>
<script> {
var d = new Date();
var n = d.getYear();
document.getElementById("year").innerHTML = n-100;
}
</script>
//
J O H N SM I T H
</div>
<div class="nav">
<ul>
<li><a href="#">C O N A C T</a></li>
<li><a href="#">A B O U T</a></li>
<li><a href="example2.html">H O M E</a></li>
</ul>
</div>
<div class="main">
This is my website.
</div>
How do I implement the "fixed" I think I may be doing it wrong.
.top {
background-color: #333333;
opacity:0.85;
padding: 16px;
color: white;
font-family: Lato;
font-size: 16px;
vertical-align: middle;
margin: 0;
position: fixed;
width: 100%; }
.top p {
display: inline; }
.nav {
top: 0;
left: 0;
position: fixed; }
.nav li {
list-style-type: none;
z-index: 1;
position: relative;
width: 115px;
margin-right: 40px;
text-align: center;
float: right;
right: 20px; }
.nav a {
display: inline-block;
padding: 15.5px;
text-decoration: none;
color: white;
font-family: Lato;
opacity: 0.6; }
It works with position: fixed
but you need to set right
instead of left
.
.nav {position: fixed; top: 0; right: 0;}
.nav ul {margin-top: 0;}