Tutorial: How to Make a Floating NavBar

Do you hate seeing that ugly permanent blogger navigation bar at the top of your blog, and you wish you didn’t have to look at it every time you looked at your blog? I know I did, so I learned how to get rid of its ugliness, and now I’m going to teach it to you. In this tutorial, you’ll learn how to change your blogger NavBar to a more attractive color, as well as make it disappear when you aren’t using it, and re-appear only when you need it.

? First, let’s look at that ugly blue NavBar one last time:

? Okay, so log into your blogger account. From your dashboard, click on the “Design” tab:

? Your “Page Elements” page will pop up. At the very top of your page elements, you’ll see the “NavBar” widget. Click “Edit” at the right of this widget.

? A window pops up that allows you to change the appearance of the bar. You can let it stay blue, but why would you want to do that? Pick another color, and click save. “Transparent Light” is my fave:

? Now, we’re going to add some text to your HTML to make the NavBar disappear and reappear. You should still be in your “Design” tab at this point. Click the “Edit HTML” tab next:

? Whenever you start playing with your HTML, you should ALWAYS, ALWAYS, ALWAYS download a copy of it first, just in case things don’t go as planned. If you make a mistake, you can always upload your original template, and your blog will look exactly as you left it before you started making changes. And remember, if you think you made a mistake, click “Clear Edits” to start over from scratch. The “Preview” button is nice, too, cuz you can see what your blog will look like with the changes you made before you commit to it by saving it.

? Next, look for the text “/* Variable definitions” near the top of your template – about 15 lines down or so:

? Directly above this text, copy and paste in the following text:

*** I realize the copied text looks different than how it appears in my template above, but blogger converts it to its preferred coding automatically, once you hit “Save Template” in the next step. Trust me on this one.

? Now, save your template:

? Okay, let’s view your blog and see what you’ve done:

 

But, to make it reappear again, just scroll your mouse over the area where it’s supposed to be, and ta-da!:

 

Try it out, and report back to me, so I can view the magic on your blog, too! Thanks for visiting!

By the way, this floating NavBar comes included on any package that you order with me, so if html code frightens the bejesus out of you, order today and I’ll deal with that aggravation on your behalf.

*** A word of caution – depending on your Internet browser, the “disappearing” NavBar might not re-appear properly. Don’t ask me why – I use the superior Safari, so my browser works fab! ;p If you’re having problems with your NavBar, unfortunately the only remedy is to remove the code (Step  ?) from your html and make your NavBar static once again. All is not lost, however – you can still change it to a color other than blue by following Steps 1-4.