Customize standard Blogger template: remove the Navbar


Navbar is the top bar showed in every standard Blogger template. There are a lot of pages suggesting how to remove it but the majority are focused to the modify of the template code. However there are other ways a little less hazardous to get the same result...




The first safest way is the disable the Navbar from Blogger layout panel. Since Blogger has not announced them perhaps few have noted that was introduced a new option for totally hide the Navbar directly inside the Navbar widget settings. Into Blogger control panel go to "Layout" section and open the Navbar widget settings page:




Once widget window opened scroll down the Navbar list  and you'll can see the last option called "Off":





By selecting this option and save the settings the Navbar will disappear. This solution is very easy but have a small problem. Once switched off the Navbar will not showed anymore but the space into the blog previously occupied by this is still not available. In practice the Navbar was not removed but only "invisible". This have as direct consequence that your blog header will start not from the top of the browser without but after a small space corresponding the to height of the Navbar just hidden. If this is not a problem for you stop here. But if your plan was remove the Navbar for have available all the space from the top you need to make an additional action. Basically the tricks is the same proposed by all other sites. Add a CSS tag for completely remove the Navbar. However, unlike add this CSS tag directly into the template code, is possible to add by Blogger customization panel. Read this post explaining how to make this action and, once finished all the steps, came back here. 

Now have you learned how to add your custom CSS tag? OK, the CSS tag to add is the following:

#navbar 
{
height: 0px;
visibility: hidden;
display: none;
}

Immediately after added this code you'll see the Navbar disappear and all the blog header block move up in consequence of the new space available. Obviously remember to save the changes after addition. Hope that this small trick will help.

 

Comments

  1. Thanks for this code, But please inform me where i put this code,in theme setting or else.?


    Jogos de moto



    ReplyDelete
    Replies
    1. Hi

      Where to put the CSS code is written above the code itself. Basically you have to follow the instruction of this post:

      http://goodtipsandmore.blogspot.it/2012/12/how-to-add-custom-css-tags-to-standard.html

      Delete

Post a Comment

Popular posts from this blog

Bypass email and SMS account verification