How to Add a Full Width, Sticky Navigation Bar to Blogger (Part One)

10:00

sticky navbar, scrolling navbar, navbar that sticks to the top of the page as you scroll, scrolling navbar, scrolling navigation bar on blogger, how to make a navigation bar that sticks to the top of the page on blogger

Looking to add a full length navigation bar to your blog that sticks to the top of the page as you scroll down? There are a number of tutorials on how to do this online, but many of them are quite complicated and some don't work at all. I've found this to be the easiest way, and while there are still a few steps involved if you follow them to the letter it works every time. Here's how to do it!

1. Go to 'layout' from your Blogger's dashboard, click on 'navbar' at the top and turn it off
2. In layout, under your header click 'add a gadget' and choose a 'html/ javascript' gadget
3. Paste the following code and click save

<div id="navigationbar">
<center>
</center>
</div>

(if you don't have an 'add a gadget' option under your header, simply paste it into a html/ javascript gadget somewhere else on your blog, and carefully drag it under your header).

4. Now go to 'template' from your Blogger's dashboard and click 'customise'
5. Click 'advanced' then 'add css' at the bottom, paste the following code then press enter/ return

.navleft {float:left;} .navright {float:right;} .tabs-inner .widget ul {margin-right: 0px; margin-left: 0px;}
.tabs-inner .widget ul, .tabs-inner .widget li a, .tabs-inner .section:first-child ul { background: none; border: 0px;}
#navigationbar {width: 100%; height: 50px; background: #bdf5ee; opacity: 0.9; filter: alpha(opacity=50);
position: fixed; top: 0px; left: 0px; z-index: 999;}

This will give you your basic sticky nav bar. You can change the '50px' values to make it wider or narrower, and change the #bdf5ee to any valid hexadecimal code to change the colour (find valid hexidecimal colour codes here). Now you have your scrolling bar you need to add your navigation buttons, I do this using an image map which is a clickable image. To learn how to do this, read on HERE

You Might Also Like

10 comments

  1. Thanks a lot for this fantastic tutorial. It was the feature I was looking for my blog..it looks really good now. Love your blog ;)
    www.handmadetoast.com

    ReplyDelete
  2. I tried do this and it didn't work! I did it once and it worked perfectly, I ended up deleting it by accident and tried to re do it and now it's not working anymore. Please help!
    XO Alyson | www.mylifeasalyson.blogspot.com

    ReplyDelete
    Replies
    1. Hi Alyson, I've used this method recently and it definitely does work so all I can advise is try again! Read through and follow the steps carefully, make sure you're copying and pasting the entire code without missing any at the beginning or end etc x

      Delete
    2. I will, thanks for replying so fast!!!
      XO Alyson | www.mylifeasalyson.blogspot.com

      Delete
  3. Thank you for sharing this! For some reason it's going behind my photos when I scroll down, is there any way to remedy this?!

    Jennifer

    ReplyDelete
    Replies
    1. Hi Jennifer, I have never encountered this problem so I'm really not sure I'm sorry! I'm guessing you have some other code somewhere on your blog that's interfering with it. My only advice would be reset your template and start again from scratch, adding the navigation bar first and seeing if that fixes the problem. A bit of a long way around but I think that would solve it x

      Delete
  4. thanks, but how to we can create responsive menu

    ReplyDelete
  5. I followed this and step 2 and its PERFECT!!! Only issue is it doesnt show up on my mobile template. I switched it to a custom template setting but it still isnt there... any advice?

    ReplyDelete
  6. woah. this tutorial was amazing!! really helped me a lot. <3 I feel like an professional I.T right now hahaha.

    ReplyDelete

Follow

Related Posts Plugin for WordPress, Blogger...