How to Make Your Blogger Menu Bar Float Right Now

Floating menu or fixed menu is an interesting way to beautify your menu bar. In addition to the beauty, it also helps your visitors to navigate your page. 

Note: The possible position of the menu bar is right at the top of the page.

Let's go..

Finding your menu bar identity

We use CSS to make the menu bar floating. Meanwhile, CSS needs an ID or a class name of the HTML tag to identify the specific HTML tag and apply the CSS effects. 

ID and class are HTML tag identifier. In this case, you just need to find one of them. Therefore, you need to know the ID or the class name of your menu bar.

If you don't know even one of them, below I give you a simple way to know your menu bar ID or class name by using inspect element feature from chrome or another browser.

1. Go to your blog address.

2. Right click exactly on the corner of the menu bar and click the inspect element option.

3. Look at the highlighted div element and find its id or class name. Make sure it is the correct div element that covers over the menu bar. You can know it by looking at the menu bar while your pointer hovers over the highlighted div element in the inspect element. It should be all blue over the menu bar.

Based on the image above, I found the ID with the name 'nav'. Now, you should have got the id or the class name too. 

Making it real

1. Open your blogger dashboard and go to the theme page.

2. Once you are at the theme page, click the Edit HTML button. 

3. Click anywhere inside the editor box and press CTRL + F. The search box should appears at the top right.

4. Find the <style> tag by using search box and place these code under the <style> tag and match the red color text with menu bar id or class name.

If you found an id, apply this:

#menu_bar_id {

position: fixed;

width: 100%;

z-index: 10;

}

If you found a class name, apply this:

.menu_bar_class_name {

position: fixed;

width: 100%;

z-index: 10;

}

The difference is only in the way of writing identity, which if it's an id it uses '#' symbol and if it's a class it uses '.' or dot.

4. NOT COMPLETED YET. Press CTRL + F again and find the div element of your menu bar. It should looks exactly like in the inspect element. 

5. Find the </div> tag or the div tag closer of the menu bar div tag. Every <div> tag should closed by the </div> closing tag. So find it and paste the following div element just below it.

<div style="height:48px;width:100%"></div>

So it should looks like this:

<div....>.......</div> ← this is the div element of the menu bar.

<div style="height:48px;width:100%"></div>

What does the new div element do? Well, it replaces the position of the menu bar and gives a space. So there is no hidden part anymore. You can follow this guide only until step 3. But, you may find a little missing page part that hidden by the floating menu bar because it completely being float.

Note: match the red number above with the high-size of your menu bar. You can know how is it from the inspect element.

6. Click 'Save template' button to let it updates itself.

7. Refresh your blog.

Enjoy! Now you have a floating menu bar that can be accessed anywhere even your page is scrolled down.

If you found any error just let us help you! Comment below, and don't forget to share this post and subscribe to this blog.