Convert simple Blogger menu to sticky

sticky nav menu



Hi I have share with you the trick that how we can convert out blogger widget into sticky widget but today I am going to share a trick that we would make our current blogger menu into sticky menu. Generally the purpose of this trick is to make more easier blogger navigation for blog visitors. When a visitors read an article then s/he may goes to bottom of the article page. So if s/he wants to enter into another category then again s/he to go at the top of the page. So if your blog menu sticky then the menu will scroll down with the moving of mouse pointer. As a result your blog visitors don't have to go at the top of the page again and again. So this is very effective to make your blog visitors stay longer with your blog. The coding is made with pure CSS and very easy to add into your blog.

sticky menu

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard
Step 2 Now click on -> Template -> Edit HTML

Step 3 Now Find </body> by pressing  Ctrl + F

Step 4 Now paste the below code above/before </body> 

<script type='text/javascript'>
$(document).ready(function() {
     / / Determine the element that is made ​​sticky. nav
    var stickyNavTop = $('.nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        / / condition if discroll it will always be on the menu, and vice versa               
        if (scrollTop > stickyNavTop) {
            $('.nav ').css({ 'position': 'fixed', 'top':0, 'left':0, 'z-index':9999 });
        } else {
            $('.nav ').css({ 'position': 'relative' });
    / / Run function
    $(window).scroll(function() {

Step 5 And save your template.


I have explained this code with .nav but your menu coding may differ. Suppose responsivenav, navbar etc. so replace with those nav words.

If you face any problem then feel free to contact with me. 

Post a Comment

This article ismet his brother

I think you have heared about a developer site have taken basic source from that site. of this trick. Not ismet bro 8-)

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form


Email *

Message *