CODEWITHSUNDEEP
csshtmlwebweb-development-server
HyperRaze
HyperRaze

Reputation: 1

How to make a navigation bar permanently on top?

Can i make a navigation bar always on top?

i am not talking about the : position: fixed; thing...

the problem with my navbar is that when you zoom it out it is not on top anymore...

how can i make it like this site's navigation bar where is is always on top when you zoom it out?

or

is there any chance that i can make it like facebook's navbar (the one on top which says home)
that has a FIXED position but still the same when zoomed in or out.

the code for my whole css is here and the html for the navbar is there also

if you want to check the site the 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>

Upvotes: 0

Views: 1571

Answers (3)

light
light

Reputation: 4287

Yes. By default, things always flow from top to bottom regardless of zoom.

While you can try to source for a bandaid that works, I think you're going down a seriously problematic, wrong path. From your code, it is clear that you have a lot of misunderstandings about HTML and and how elements are styled.

What you should really do is basically revamp the whole page:

  1. Fix the multiple syntax problems in your site/understanding - <center>, <marquee>, <font>, <ul> without <li>, mixed up closing tags, scripts outside of </html>, bgcolor attribute...

  2. Then, layout your site from TOP to BOTTOM using proper HTML.

From what I guess, you want something like this:

<nav id="navbar">
    <a id="link1">...</a>
    <a id="link2">...</a>
</nav>

<img id="logo" src="..." alt="Awesome Logo" ...>

<h1>...</h1>
<h2>...</h2>
  1. Add in your CSS without touching the HTML.

You will realise you don't actually need to do anything special to get it to stay at the top - it simply always does.

Upvotes: 0

Shrinivas Pai
Shrinivas Pai

Reputation: 7701

Change this class:

div.navbar{
border: 0px;
background-color: red;
width: 40000px;
height: 50px;
padding-top: 0px;
padding-bottom: 2px;
position: fixed;
top:0; /*added this*/

}

Upvotes: 0

Daniel
Daniel

Reputation: 18680

You have to use: top: 0; instead of bottom: 623px; for div.navbar. Using bottom property is why your div.navbar element goes down when someone zooms out the page.

Before: enter image description here

After: enter image description here

Upvotes: 2

Related Questions