Sticky Navigation bar using html 5 and css3 (small code)
Sticky Navigation Bar using HTML 5 and CSS3 (Small Code)
Sticky Nav bar is the 'it' thing today, whether its facebook, google, or anyone else. But what I wanted was a simple short code. No Javascript, or anything else that would make me wanna puke.
Under <body> tag, add this:
Under <body> tag, add this:
Thats it!
To use it to your ease, here is a few explanation, if you are unfamiliar to HTML5/CSS3
div id="header" <----- this is a unique ID given to a html element, so the browser knows that the style being applied using the '#header' is for that particular element, and no one else. It is only used once, use 'class=' tag, if you want to use a style for different elements many times. Doing so, would reduce the size of your webpage, resulting in lower bandwidth need and performance stuff.
background: #f2f2f2; <---- color of your bar, use photoshop eyedropper tool to get the # of the color you want.
padding:28px; height:55px; <----- play with these to adjust the breadth of you nav bar.
color:#ffffff; font-family:Arial Rounded MT Bold; <---- name and color of the font.
box-shadow: 1px 1px 5px #888888; <--- the small shadow below the bar to make it look uplifted ;)
(note: text-shadow for text, works similarly)
position:fixed; <---- this is why your bar is sticky, but for some reason, when I added it with things above like background, padding, etc.. it was not doing its job over there, so I brought it down and it started to work. See the 'position' html documents on w3schools.org
top:0px; margin-top:0px; <---- very important for sticky nav bar to work properly. Just tells the browser the position is to be calculated from the top, and to add no margin by yourself dear browser!
width:100% <--- very important. It tells the browser that every time the length of your bar would be 100% of what you see on the page. Without this, your bar would look awkward, too small on larger screens. This is also a nice performance tweek ;)
Thank You.
how do I add titles to the navbar?
ReplyDeleteuse the "a" attribute. Search google for HTML links, and click on W3schools result.
ReplyDeleteHow would I adapt this to have the navigation bar as a footer? And can you stick a table and/or images in it? Thanks, I've been playing with sticky header/footer samples all day, and this is the first one that actually seems to work!
ReplyDelete@Dave: instead of top:0px, write bottom: 0px, so that it stays at the bottom.
ReplyDeleteI can't put link here. Please give it customized with Home, Contact button & search box.
ReplyDeleteIts a bit extensive to add that here, given you would also like to style these links (Home, Contact). But you can see this page: http://www.w3schools.com/css/css_navbar.asp
Deletefor search bar, you have to first make a search engine. Approach this problem like a wall clock, the search bar is the front of the clock that you see, the hands, the digits, the frame. And the search engine is the internal machinery (backend) of the clock that keeps it moving behind the scene.
Any way I can make the position not fixed? The nav bar drops down and covers half my page when the fixed attribute is taken out.
ReplyDeleteTry using the position: absolute; instead.
Delete