How To Move The Blogger Navbar To The Bottom Of Your Blog


blogger navbar tricksA recent suggestion i seen in the comments for Blogger Buzz The official Blogger Blog, was to provide the option to display the NavBar on the bottom of the page on your blog instead of the top.A lot of blogs have Removed the Blogger Navbar but it can be very useful for both the author of a blog and especially for the readers so this seemed like a great idea.

However it’s highly unlikely Blogger will consider this suggestion but if you also like this idea don’t worry, i have a way you can move the navbar to the bottom of your blog in just 3 quick steps.To show you how it looks take a look at this demo : Navbar On Bottom Of Page 

Move The Blogger Navbar To The Bottom Of Your Blog

Step 1. – In Your (New Design) Blogger Dashboard Click The Drop Down Menu For Your Blog > Choose Customize > Advanced > Add Css, as shown in the video below.

Step 2. Copy and Paste the following code into the Css Section then click Apply To Blog.

#navbar-iframe {
position: fixed;
right: 0px;
bottom: 0px;
left: 0px;
}

Click Save and the Navbar on your blog is now positioned at the foot of your blog !

Very easy, another cool effect is using a Hover Effect Navbar.This effect makes the navbar only visible when you place your cursor over the navbar section of the page.Check out some more Blogger Navbar Effects.

Drop Your Comments And Questions Below.

AuthorAuthor – Paul Crowe is the owner and main author of Spice Up Your Blog.Paul lives in Ireland, has been blogging since 2006 and writing Spice Up Your Blog since 2009.You can find him in the usual social networks.

12 comments:

  1. woohooo,did it! Ty Paul !!!

    ReplyDelete

  2. Hey Dude, thanks!

    ReplyDelete

  3. Didn’t work for me:( I tried it like 100 times!!!

    ReplyDelete

  4. YrHelper InfonutMay 8, 2011 at 2:53 PM

    This code floats the blogger bar on top of the blog nifty, but not quite what I’m looking for. Love this code for comments though!

    ReplyDelete

  5. So creative! I think u could set body{margin-bottom:30px} and #navbar-iframe{z-index:100}

    ReplyDelete

  6. Can you tell me how to place the Navbar at the top of the blog but when I scroll, it follows like how it does with this?

    ReplyDelete

  7. had a blog makeover and had to find “moving the nav bar” that you once suggested over a year ago…found your page agian with a google search. Then found your latest link on hover affect… it worked great. Thanks again for the trick/tip…kudos on your site.

    ReplyDelete

  8. howdy. my nav bar just dropped and is covering my banner. i use blogger classic. i don’t know why this suddenly happened. any idea how to fix it?

    ReplyDelete

  9. Perfect thanks, i needed the bar for the little tool icon that appears to tweak the gadgets.

    ReplyDelete

  10. I like this idea! It works great. Thanks

    ReplyDelete

  11. Tukang toko onlineMay 19, 2013 at 2:31 PM

    I did it, thank you, Master…. 😀

    ReplyDelete

  12. I was suggested this blog by my cousin. I’m not sure whether this post
    is written by him as no one else know such detailed about my difficulty.

    You are amazing! Thanks!

    Here is my blog post … day trading

    ReplyDelete