How to change the Color/Style of your Blogger Navbar

December 7, 2019

I'm personally not a big fan of the blogger navbar, and you will often see it hidden on our premadeblogger 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 theblogger 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 onthe 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:

]]>

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.