How To Make Your Navigation Menu Float

/

/ by
When you scroll through my blog you may have noticed that my Navigation Menu stays at the top. It floats over my blog rather than staying at the top of the page and disappearing when you scroll down. 

In this post I'm going to show you how to make your Navigation Menu float.



As always use the "Inspect Element" to try out changes before changing your HTML.



Right-click in your Navigation Menu and click "Inspect Element". 

In the Styles section you should see the settings for your Navigation Menu. Below the element.style it could say #navigation or tabs.inner or something similar, these are the settings you're looking for.


Click below your last setting, in the picture that would be below the text-align.

Type in this exactly as written:

position: fixed;
z-index: 9999;

Include the colons and semi-colons too.

The 'position' will fix your Navigation Menu in place, it will stay there even when you scroll, and the 'z-index' will bring it to the front making it hover over your page.

If you're happy with how it looks you'll need to make these same changes in your HTML.

**Please back-up your template before making ANY changes!




Once you've backed up go to Template, then click on Edit HTML.


That will open your template HTML and now you can add in the code we need to make your Navigation Menu float.

This next section is instructions to edit the HTML if you have a custom template like mine. If you have a standard Blogger Template you'll need to edit your CSS. I'll show you how to do this too, just scroll down.

Click in the box with all the code in it and hit cmd F (on Mac), or whatever your shortcut is for 'find'.

In your search box type in #navigation or tabs.inner, or whatever the section was called that you edited in "Inspect Element".



In the same place you typed before (beneath text-align) you now need to type

position: fixed;
z-index: 9999;

Save your template, view your blog and check that your Navigation Menu is both fixed and hovering over your page.



If you have a standard Blogger Template you will need to edit your CSS to make your Navigation Menu float.

Go to Template and click on Customise.


Click on Advanced and then Add CSS, you may have to scroll down to find it.


Click inside the white box and type:

.tabs-inner {
position: fixed;
z-index: 9999;
}


Look at the preview and make sure your Navigation Menu is where you want it and then click Apply To Blog.



At this point I would recommend having a white background, or something that compliments your site, on your Navigation Menu. If you have it set to be transparent people will not be able to read your Navigation Menu as they scroll down.


If you like my posts be sure to follow me on Bloglovin (click the icon and make my day) , or find me on Facebook and 'like' my page to get updates on what I'm up to .


2 comments:

  1. Lovely Morgan I am going to try this tonight. Fingers crossed it works and thank you so much x

    ReplyDelete
    Replies
    1. You're welcome hun. Let me know how it goes, if you have any trouble you can email me at morgan@morganprince.com. :) xx

      Delete

Follow @ Instagram

Back to Top