How to Make Blogger Official Navigation Menu Floating When Scrolling?

Using floating navigation bar on your blog provides an user-friendly browsing experience, and such design can be found from many famous websites.

It brings visitors many advantages if the menu is sticky, and we'll talk more about it later. You might find some tutorials of how to make a sticky menu on Blogger blog, but another question is "how to make Blogger official navigation menu floating?".

If we could make official widget floating, then it will be much easier to manage (add, remove, rearrange) all the links by the official navigation widget.

Click to see DEMO page

(pic from: pexels.com)

I. Advantages

Firstly, let's know more benefits about floating navigation bar:

1. Decrease bounce rate

Floating objects on screen can attract visitors' attention. If some subjects on navigation menu meet visitors' need, they might keep reading relative articles instead of leaving our blog, thus we could decrease the bounce rate.


2. Provide guidance

General speaking, new visitors are not familiar with our website, they might come to our blog for some specific posts accidentally. After finishing reading that post, maybe they don't know what to do, where to go, how to continue.

Floating navigation menu will become a handy guide for these new visitors. If you design the content of menu carefully and wisely, your visitors will realize:

• the structure of your blog
• where to leave comments
• how to contact you
• what services your blog provides

3. Friendly operation

If the navigation menu is not sticky, then visitors need to find and click the "Go Top" button, go back to the top of the web page, in order to find the navigation menu.

So, you can see how inconvenient it is if one web site doesn't use the floating menu, not to mention some web sites don't have "Go Top" button.

II. Installation

Before editing the template, if this is your first time to install my widgets, it's recommended to read 「How to backup Blogger template」in advance.

Please follow the steps below:

• Go To Blogger Dashboard → Template → Edit HTML
• Click into template area → Press Ctrl-F to find the string </body>
• Paste the following code just before this line:

If using the default value for parameters, just save it then you can enjoy this widget.

If you would like to modify the default values, please refer to the alphabetical character above:

G: if your blog use Blogger official template, normally you don't have to change the red string in this line. If not and you know what you're doing, just find where is your navigation menu located in the template, and replace the red string with:

• if you would insert the ID of the division(<div>), just fill in "#" + ID, such as "#navbar"
• if you would insert the class name of the division(<div>), just fill in "." + class name, such as ".navbar"

H: the blue number means the distance to the top of the screen (in px).

I: the blue number means the degree of opacity, you could use the number between 0 ~ 1. 0 stands for fully transparent, 1 stands for not transparent.

J: the blue string means the color of background. Please refer to the remark in green.

If you would like to preview this tool, please go to the demo page：

Click to see DEMO page

III. Reminder

In most situations, I think this tool will work well for Blogger official template. However, under some special conditions it might not be suitable to use the floating menu.

For example, some types of the navigation bars come with "2 round corners", not the square shape or "4 round corners". If you ever try to make the "2 round corner" bar floating, I would say it's not a fancy choice for the aesthetic.

Maybe there are some other types of navigation bar which are still not suitable for floating purpose. If you do want to have a sticky bar, I would suggest you to change the look of your navigation menu.