Hide Blogger Navbar | Life and Linda

Subscribe to receive updated tablescapes, designs and more Click Here!

X

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

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.

18 comments:

  1. Hi Linda! Oh, this is one of those scary sounding things! I really don't mind the bar being there because I'm always clicking here and clicking there! The new blog design for the the doll maker is so cute! I don't know her so I'll have to pop over. Hope you're doing well.
    Be a sweetie,
    Shelia;)

    ReplyDelete
  2. Linda, you are so talented. What program do you use to design websites? I have some interest. Thank you!

    ReplyDelete
  3. Love the sneak peek of your Easter table. Beautiful! Thanks for the tips.

    ReplyDelete
  4. You lost me at navigation bar.....lol....not really....I have such a bland blog and I just ramble on about anything and everything so I know it is not professional looking at all. But- I love coming here and looking around and I can usually spot a blog you have designed when I come across it. I think you just did one for Ron & The Uptown Acorn, too~
    I will pop by the new dolly's blog! xo Diana

    ReplyDelete
  5. Linda, I don't know if I ever mentioned that I made a similar box to yours for the dining room table.We used it for Thanksgiving and Christmas and plan to use it for Easter. You are ahead of me ;o) Great tip on the navigation bar.

    ReplyDelete
  6. Love the new blog design- so cute! I wouldn't even attempt to try something like this- I'd probably blow it big time! Your dining table box looks so cute for Easter. I need to get motivated on that subject.

    ReplyDelete
  7. Good morning, BEAUTIFUL! I agree about the navbars. That is why I took mine off because half the time, people complained that the links didn't work, and I prefer that people see only the photos, hear the music and read the short message. No fuss, no muss.

    Linda, your table is going to thrill your guests! I wish you peace and happiness! Anita

    ReplyDelete
  8. Hi pretty Linda,
    You know me, I'd rather have you do the tidying up!! I'm to afraid of messing things up.
    Have a wonderful weekend, sweet friend. xo

    ReplyDelete
  9. You are incredible my friend. Thank you for sharing the directions. Not sure I can navigate around the hiding, but worth a try. LOL
    Love your new blog design.
    Have fun and enjoy the new backsplash.
    Happy Weekend.
    Hugs

    ReplyDelete
  10. Hiya Wonder Woman,
    I had taken my nav bar off too when I was on a google and it looks so much better. Great tutorial! Hope your weekend is off to a good start, my sweet friend. Talk to you soon. xoxo

    ReplyDelete
  11. This is one that I'll have to ponder. I like my Nav Bar and use it all the time and never think about it on other blogs...it just doesn't register with me. But, you know me, in a day or two, I'll get thinking about it and maybe just maybe...

    ReplyDelete
  12. Loved getting rid of the NAV Bar...thanks! I love your blog designs, too! ♥

    ReplyDelete
  13. You know, I've never really paid attention to that Nav Bar. I know it's there, but I always just scroll past it.

    ReplyDelete
  14. I might have to give this one a try when my brain is rested. It is so nice of you to offer the advice. Your blog looks great!

    Thanks very much for dropping by my blog and checking out Dollywood's Festival of Nations and leaving the nice comments!

    ReplyDelete
  15. Thank you for the tip Linda. I will look into it. You are a good blog resource. Thank you for visiting me. Love hearing from you.

    ReplyDelete
  16. I think it changed the color but it didn't remove the bar.
    I hit enter after I added the bar code and again after I added the color code.

    ReplyDelete

I so appreciate your visits and sharing your thoughts at Life and Linda.

Please note that I use Google Adsense, Shareasale, Rakuten and Amazon affiliate links on this site. This means using them for purchases won’t cost you extra but may earn me a small commission. Our full disclosure is available for viewing under About in the disclosure policy.
All rights reserved. Our graphics, images and text are all subject to copyright protection.

Instagram