How to toggle the navigation bar

I received an email asking how to toggle the navigation bar (have it only show up when your mouse is over it), so that is what I'm going to tell you about today.

I told you before how to hide the navigation bar completely but some people want it to be there so that the 'next blog' option is available still. They also like to show that they are a Blogger blog, have the search form available up there and be able to sign in from it. They don't, however, want it there all the time because they believe it interferes with their blog look. I understand that line of thought. I don't like it up there all the time either.

One more thought before I tell you how to do this... A lot of new blog templates have the nav bar hidden in the HTML so when you use their template, the bar is automatically hidden. This code will help that too.

1. Go to your dashboard and find the blog you want to toggle the nav bar on

2. Select Layout


3. Select Edit HTML


You may want to download your full template if you're afraid you are going to mess up. That's up to you. I live dangerously and never do this but it's a good idea if you're unsure of what you are doing ;)


4. Find the following code:

#navbar-iframe {

There should be more code following it. More than likely it will say something about 'hidden'. Highlight all the code between the # and the } (notice that that symbol is backwards from the one above..it's the closing symbol)

5. Replace it with the following code:

/* Blogger Navigation Bar */
#navbar-iframe {
opacity:0.0;
height: 10px;
filter:alpha(Opacity=0)
}
#navbar-iframe:hover {
opacity:1.0;
height: 30px;
filter:alpha(Opacity=100, FinishedOpacity=100)
border: 2px;
}

6. Preview your blog to make sure it looks right

7. Save your template

You can also go to Page Elements under Layout and change the look of the nav bar. I have this blogs set to Transparent Light. That allows my original blog colors to show through the nav bar. You can hover your mouse towards the top of this page to see how it looks. I hope this helped! Be sure to let me know anything you want to know how to do! Have a great Thursday everyone and I'll see you soon :)