Last Updated on
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.
Step #1: Visit Blogger.com >> Go to Theme >> Edit HTML >> UsinG CTRL + f Search for
Once found, Paste the below code above it
Step #2: Search for
Once found, paste
below the code.
Step #3: Search for
Paste the below CSS just above it and save.
This CSS code is minified using my Free CSS minifier tool
- 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.
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