Thursday, June 23, 2016

How to Remove the Blogger Navbar


Do you have a Blogger blog? Are you looking to take your blog to the next level? If so, you may be interested in this upgrade.

If you notice on other professional blogs and sites, they lack what all Blogger blogs come equipped with- the Navbar. While this is meant to be a handy feature on a site, it definitely isn’t necessary. Without it, you’re not missing much and get to enjoy a better and more professional aesthetic. Check out my two step process in obtaining a more seamless look!

1. Head over to Layout. Click on ‘Edit’ of the Navbar container. Turn off the Navbar.


You’ll now notice there is a gap between your header or pages navigation bar. To remove this all you’ll need is this bit of CSS:

                                                                              .content-inner { 
                                                                              margin-top: -40px; 
                                                                              }

Adjust the pixel size depending on what spacing size you're looking for.

2. Click Template. Go to ‘Add CSS’ under Advanced. Paste the line of code from above in a new line.


And that’s it! It’s that simple. Enjoy your new look! If you have any questions, do let me know. :)

Are there any technical topics you’d like for me to cover?

13 comments:

  1. Thanks, Molly! This was very useful. I didn't know it could be removed. You are right, it looks more professional like this. I'm actually looking into redesigning the whole blog during the summer holidays. I'm tired of the blogger look.
    Have a lovely weekend xo

    http://memoriesofthepacific.blogspot.com.es/

    ReplyDelete
    Replies
    1. Glad you found this useful! I totally understand being tired of the Blogger look. Over the next few months I will be posting DIY template design type posts for Blogger, so perhaps those could help you! Anyway, good luck with your redesign! :)

      Delete
  2. I hated it, so I removed it too :D looks so much cleaner hihi
    Pam xo/ Pam Scalfi♥

    ReplyDelete
  3. Great post !! :D

    Kisses
    http://ourstyle-blog.blogspot.mx/

    ReplyDelete
  4. Thank you Molly! I knew how to turn the navbar off, but the large gap it left really annoyed me! This post came in handy!x

    AimeeSueXO
    Bloglovin

    ReplyDelete
  5. Thank you, I really wanted to know how to do this and now I know!

    Also thank you for following me, I have just followed you on Bloglovin! x

    Amy x
    Amyrosexoxo.blogspot.com

    ReplyDelete
  6. Thank you, I really wanted to know how to do this and now I know!

    Also thank you for following me, I have just followed you on Bloglovin! x

    Amy x
    Amyrosexoxo.blogspot.com

    ReplyDelete
  7. Thanks for the lovely comment on my blog! loved this post, followed!

    wiltedxfaded.blogspot.co.uk

    ReplyDelete