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

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -