Is it possible to create a navigation bar that remains fixed at the top of the page?
I'm not referring to using the "position: fixed;" property...
The issue with my current navbar is that when zooming out, it loses its position at the top...
How can I achieve a navigation bar like the one on this site that stays at the top even when zoomed out?
Alternatively,
Is there a way to make it similar to Facebook's navbar (the one that says home) where it has a fixed position but remains consistent when zoomed in or out?
The CSS code for my entire design including the HTML for the navbar is provided below
If you want to visit my site, here is the link:
Thank you
ul.navbar{
float: left;
display: inline;
}
#hyper{
position: relative;
top: 70px;
z-index: -1;
opacity: 0.9;
}
a.navbar{
display: inline;
padding: 9px;
display: block;
float: left;
background-color: #009900;
text-decoration: none;
border-right: 53px solid red;
width: 70px;
}
a.navbar:hover{
color: #009900;
background-color: blue;
}
div.navbar{
border: 0px;
background-color: red;
width: 40000px;
height: 50px;
padding-top: 0px;
padding-bottom: 2px;
position: fixed;
bottom: 623px;
}
#link1,#link2,#link3,#link4,#link5,#link6,#link7{
position: relative;
bottom: 9px;
}
#cons{
position: relative;
top: 150px;
width: 250px;
z-index: -1;
}
h1{
color: yellow;
font-family: 'Press Start 2P', cursive;
text-align: center;
position: relative;
top: 40px;
opacity: 0.5;
}
h2{
color: #009900;
text-align: center;
font-family:'Orbitron', sans-serif;
position: relative;
top: 120px;
font-size: 60px;
}
#data{
color: #b2950b;
text-align: right;
font-family: 'Amatic SC', cursive;
position: relative;
top: 300px;
font-size: 17px;
}
#marq{
color: #fff;
background-color: black;
position: relative;
top: 70px;
font-family: 'Josefin Slab', serif;
}<div id="dmenu" class="navbar">
<center>
<ul><a class="navbar" id="link1" href="index.html">HOME</a></ul>
<ul><a class="navbar" id="link2" href="index.html">GAMES</a></ul>
<ul><a class="navbar" id="link3" href="index.html">TUTORIAL</a></ul>
<ul><a class="navbar" id="link4" href="index.html">GAMERS</a></ul>
<ul><a class="navbar" id="link5" href="index.html">CONTACT</a></ul>
<ul><a class="navbar" id="link6" href="index.html">ABOUT</a></ul>
<ul><a class="navbar" id="link7" href="index.html">DONATE</a></ul>
</div>
</center>