I’m personally not a big fan of the blogger navbar, and you will often see it hidden on our premade blogger templates. From time to time, I get a request to make them visible again so you can use them to quickly log-in to your blog. For those of you who like to have this little bar up, here is a short guide on how to customize the blogger navbar by changing its color or making it temporarily hidden.
Customize the blogger navbar
#1 Change the color
Go to your Blogger dashboard. You can do so using your navigation bar o by visiting the blogger page. Once logged in, navigate to the Layout section of the left menu.
On the right, locate the Navbar section and click on the edit button in the right bottom corner of this section.
A new window will pop-up, showing a few different styles you can choose to customize the blogger navigation bar.
Pick the one you like and click ‘save’.
That’s all! Your navigation bar is now updated.
#2 Hide the bar
For those of you who like to have a blogger navbar but do not really like how it looks, we have a perfect option. You can make the bar visible only when someone will hover over the space where it should be.
An example can be seen, for example on the Bailee design.
This time you will need to visit the Theme section of your Blogger Dashboard.
Click the ‘Edit HTML’ button under your design thumbnail on the right and add the following code to your design style:
/* NAVBAR */
#navbar {opacity:0; filter:alpha(opacity=0);}
#navbar:hover {opacity:0.7; filter:alpha(opacity=70);}
If you are not sure where to add it, the easiest way is to find the following line:
]]></b:skin>
and paste the code above it.
I hope you fount this tutorial helpful! As always, feel free to ask any questions in the comments below.
Anonymous says
Or if you're like me and hate the thing, you can always remove it. 🙂
Go to your layout tab (or "design" tab) and select Edit HTML. Hit 'ctrl f' to bring up the find box. Paste this in there: /* Variable definitions
Copy this code: .navbar {display:none;} and paste it directly above /* Variable definitions
Preview and save!