Hide Blogger Navbar

 Here's a peek of our Easter table.

One of my pet peeves, is the Blogger navbar at the top of our blogs.
I know people like it to log on and get to their designs, however it takes away from your blog.
To look more professional, it's better to remove it or hide it.

 Blogger has got a Navigation Bar that appears by  at the top of every Blogger blog. This navigation bar can be very useful when you are blogging, but sometimes, it can get in the way or takes away from the design. The Blogger navbar is usually hidden in most of the third party templates or professional  blogs.

This a trick to hide it and when you want it, click on it and it will slide open.
You can even color code it to match your blog, by changing the background of the bar.

In Your Blogger dashboard click  Template, then click Customize. Click Advanced
You will see Page at the top , scroll down until you see, Add CSS







Click Add CSS.
 Copy and paste the following code below into the box. 


#navbar {

width: 36px;

border-top: 1px solid #888888;

border-right: 5px solid #888888;

position: fixed;

top: 0px;

left: -6px;

background: #fe6602;

border-radius : 0 5px 5px 0;

box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);


-moz-transition: all 0.3s linear;

-ms-transition: all 0.3s linear;

-o-transition: all 0.3s linear;

-webkit-transition: all 0.3s linear;

transition: all 0.3s linear;


-moz-transition-delay: 1.3s;

-ms-transition-delay: 1.3s;

-o-transition-delay: 1.3s;

-webkit-transition-delay: 1.3s;

transition-delay: 2.5s;


z-index: 10;

}


#navbar:hover {

width: 96%;


-moz-transition: all 0.6s linear;

-ms-transition: all 0.6s linear;

-o-transition: all 0.6s linear;

-webkit-transition: all 0.6s linear;

transition: all 0.6s linear;

}


Click enter. , then click Apply to blog .
 Don't forge to hit the enter key, or it won't work!
To change the background color, look for background: #fe6602

Find a color you want or like and add it where it says #fe6602.

Just highlight that color# and then paste your color  code in it's place.

Click enter , click save

Click Apply to blog.  You can also see my bar.

Here is a color chart: Complete HTML Color Chart

Now you still have the Blogger Navbar, but it is hidden, until you click on it.

Your blog will look more professional.
Here's an example:  Closed

Open, it slides out.

If you want to remove your Navbar completely, click the Navbar button on your blog.
Click edit and then click off at the bottom.  Click save.

Blog Design Updates:

I just completed another blog design.
One is for Maryanne- A doll designer         It's Mostly The Little Things
I designed her blog- It's Mostly the Little Things....not her Oldenburg website.
Her doll website is: Oldenburg & Co. Dolls
She is fairly new to blogging, so go over and say hello.  I am sure she would be tickled.

More news:  Our kitchen backsplash is finally going in...Yea!
 Have a great weekend...xoxo

Sign up with your email address to receive the latest updates straight in your inbox.

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.