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:

http://hyperraze.comxa.com/

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: enter image description here

after: enter image description here


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

firemonkey - How do I make a beep sound in Android using Delphi and the API? -