Today, I am going to show you an in-depth guide of how to make blogger navigation menu sticky i.e float on scroll using pure CSS with Jquery/Javascript.

Whats a Sticky Navigation Menu?

A sticky navigation menu is one which scrolls alongside the content of a website/webpage. Such menus help to always display the important navigation items to the users always even when they are scrolling.

Most blogs use this because it helps to improve user interaction while scrolling.

Why use pure CSS?

CSS is one of the simplest online development languages, it loads faster and easier to manage.

Adding an extra line of Javascript can increase your page loading speed.

How To Make Blogger Navigation Menu Sticky (Float On Scroll) With Pure CSS.

Step #1: Visit Blogger.com >> Go to Theme >> Edit HTML >> UsinG CTRL + f Search for

<header

Once found, Paste the below code above it

<div class="bloggingprincesticky">

Step #2: Search for

</header>

Once found, paste

</div>

below the code.

Step #3: Search for

]]></b:skin>

Paste the below CSS just above it and save.

.bloggingprincesticky {position:sticky;top:0px;z-index:9999;background:#fff;}

This CSS code is minified using my Free CSS minifier tool

Modifications

  • Change background:#fff; to the color of your blog header.
  • Add width:100%; to make it full width.

After following the above steps, your blogger default/custom navigation menu will automatically become sticky.

The advantage of this is that by using Sticky CSS style, your header won’t obstruct any content on your website.

It will move along beautifully with the content of your website.

Check Goodness an SEO friendly blogger theme with animated sticky navigation menu.

You NEXT

I have laid out the simple way to make your header sticky, this same procedure will work for other items such as the sidebar

But however, a little code variation has to be made which I will outline in a new post.

If you have any questions, do leave it below at the comment section.

Share this post to support Bloggingprince.com