Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


Creating a moving navigation bar in HTML

html moving navigation bar

  • Please log in to reply
 

#1 OneDes

OneDes

    Senior Member

  • Designer
  • 282 posts

Posted 11 December 2012 - 02:05 AM

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.





Also tagged with one or more of these keywords: html, moving navigation bar

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users