How to make a floating navigation bar

Navigation bar are really useful and helps the visitors in properly using your website or blog. By this method you can not only make a navigation bar float but you can even make floating ads for better user interaction.



Assuming you already have a navigation bar in your blog's theme. Go to the CSS of your theme.
If using WordPress, go to stylesheet.css in the editor.
If using Blogger, go to edit template and find the CSS of your navigation bar.

Use inspect element tool in Chrome and Firefox to correctly identify your navigation bar's CSS.

Now simple add

position: fixed;
width: 100%;
to the CSS of your navigation bar. Actually the width part is optional and you might have to do some hit and trial for your navigation bar to look right.

How it works?

It in the position part. When we set the position at FIXED the browser will keep the navigation bar's position at one place even when the page is scrolled through. 

Comments