1. In the <head> of your HTML document, start a style sheet using <style type="text/css">.
2. assign an ID for your navigation bar div. For example if you call your div layer "naviâ€Â, you should start the element like this:
#nav {
3.Placeyour layer where the navigation bar would be. Ex if you want your navigation bar to be 20 pixel tall and to span the page’s full width
#nav {
height: 20px;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
You also need to remove the margins in your page’s body to sit the navigation bar flush with the browser’s edges
body {
margin: 0px;}
4.If your navigation bar will overlap your pages content as visitors scroll. Set the element’s z-index . The z-index defines which layers are on top; the highest element is on top, and the lowest is on the bottom.
#nav {
height: 20px;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
z-index: 2;}
5.Close the style sheet using </style>, above the closing (</head>). All other content in your page will fall below the navigation bar.
6.Create a layer on your page and then fill in the navigation content ex.
<div id="nav">Navigation Text</div>
The "id" is the same name as the element name in your stylesheet.
6. Save your page and then test your navigation bar in your browser.
Creating a moving navigation bar in HTML
1. In the <head> of your HTML document, start a style sheet using <style type="text/css">.
2....
html moving navigation bar
Also tagged with one or more of these keywords: html, moving navigation bar
Web Design →
CSS / HTML →
What files do I have to upload if I win a contest: vector or html?Started by webdev01, 06 Dec 2015  html, contest
|
|
|
||
Web Design →
CSS / HTML →
Validating a check box in HTMLStarted by DesGuru, 07 Aug 2013 html, validating check box
|
|
|
||
Web Design →
CSS / HTML →
Converting a Word Documents to HTMLStarted by SmartWeb, 04 Dec 2012 converting word documents, html
|
|
|
||
Web Design →
CSS / HTML →
Using HTML With JoomlaStarted by SmartWeb, 04 Dec 2012 html, joomla
|
|
|
||
Web Design →
CSS / HTML →
Making text blink in HTMLStarted by SmartWeb, 04 Dec 2012 blinking, html, text
|
|
|
0 user(s) are reading this topic
0 members, 0 guests, 0 anonymous users
