html - How to make a navigation bar permanently on top? -
can make navigation bar on top?
i not talking : position: fixed; thing...
the problem navbar when zoom out not on top anymore...
how can make site's navigation bar is on top when zoom out?
or
is there chance can make facebook's navbar (the 1 on top says home)
has fixed position still same when zoomed in or out.
the code whole css here , html navbar there also
if want check site link is:
thanks
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>
you have use: top: 0;
instead of bottom: 623px;
div.navbar
. using bottom
property why div.navbar
element goes down when zooms out page.
before:
after:
Comments
Post a Comment