Manipulating the Blogger Navbar

   The blogger navbar, in default is displayed at the top of all the Blogger blogs. Most of the time bloggers tend to hide it for some reasons such as, aesthetically it won't match the blog's template.

   In this post, you will be able to learn how to manipulate the blogger navbar. Listed below are some techniques to manipulate the Blogger navbar.

• Removing the Navbar
• Hiding the Navbar

Removing the Navbar

    There is a big difference from hiding the navbar from removing the navbar. Hiding the navbar will only allow you to hide the navbar from your blog, but the code for the navbar would still be found in your page, thus allowing you to unhide it. In this navbar manipulation on the other hand, you will permanently remove the navbar and its source or codes.

Click here to completely destroy the navbar above!

Wow, seems that you have permanently deleted my navbar!
In this case you can refresh this page to restore it.

    It only takes a single script to remove the navbar, once the script is loaded, the navbar code is deleted. The process is reversible by deleting the "navbar removing code" itself.

JQuery Approach
    In this approach, JQuery is used, wherein you will be required to install the JQuery Library, refer to INSTALLING JQUERY TO YOUR BLOG post for a step by step instruction. Below are the steps for you to follow in removing the navbar completely.

Show or hide the code for Jquery Approach (Removing the Navbar)

Jquery Approach (Removing the Navbar)
Code:

<script type="text/javascript">
    $('#navbar').remove();
</script>

1 Make sure that you have JQuery installed in your blog.

2 Go to Layout >> Add a Gadget.

3 When the pop-up box appears, choose HTML/Javascript.

4 Copy the code above and paste it into the content box.

5 Leave the title box blank if you want it not to show up on your page.

6 Press save.


Hiding the Navbar

    Hiding the navbar is far easier than removing it, plus, you get to unhide it whenever you want to. Below are different approaches in hiding and unhiding the navbar.

Hide or unhide the navbar (Won't work if you destroyed it)

CSS Approach
    CSS or Cascading Style Sheet is the easiest approach to hide the navbar. By adding a simple block of code, you get to hide the navbar. Below are steps on how to hide the navbar using CSS.

Show or hide the code for CSS Approach (Hiding the Navbar)

CSS Approach (Hiding the Navbar)
Code:

#navbar{
    display: none;
}

1 Copy the code above.

2 Go to Template >> Advanced >> Add CSS.

3 Paste the code in the Add custom CSS Box and press Apply to blog.

    To reverse the process go back to Template >> Advanced >> Add CSS and delete the code that you have added.