Ads Top

How To Make Your Blogger Menu Float While Scrolling

Hello and Welcome to Getwebinfo. Here on this post you can learn about that How To Make Your Blogger Menu Float While Scrolling. The most common topic on Google Search Engine this is and i am decide to create a post for all of you and you can easily use this method to solve your this problem. This can be super handy and add to your user experience since the visitor won't have to scroll all the way back up to the top of the page to see your menu links. 





How to Add Floating Menu While Scrolling

First Method 

The fist and easiest way to do this is to simply position your navigation menu at the very to of the page and allow it to stay in a fixed position as the user scrolls down, keeping your menu at the very to of your page will avoid having to add any JavaScript, so if you aren't comfortable with editing your blog's code then this is the method for you Here is an example for you.

Make sure you have added the Blogger "Pages" widget to one of the header areas in your layout page (either the Cross-Column or Cross-Column2 widget spaces). Then follow the steps below

Step 01: Login to Your Blogger Account and Click on Customize Pages

Step 02: Select Advanced from the side menu then Add CSS

Step 03: If you've already inserted custom CSS in this box scroll down to the very bottom of your code

Step 04: Add the following CSS code to the box

/* Blogger floating menu by getwebinfo.com*/
#navbar {display:none}
#PageList1 ul {
position:fixed;
top:0px;
z-index:1000;
background-color:#ffffff;
width:100%;
max-width:1100px;
}
.content-inner {
margin-top:30px;
}
Step 05: Change the "max-width" variable to the overall width of your own blog content area.

Step 06: The "margin-top" variable should be the height of your navigation menu. You can leave it as is if you haven't modified your blogger pages menu.

Step 07: You can also change the background color variable to a hex color code of your choice. Right now it is set to white.

Second Method 

The Second Method is for menus that are positioned below the header image or not positioned directly at the top of the screen.  For blogs designed this way, You'll want the menu to say in its desired position at first and then float in place as the visitor scroll past where it's settled. Here is how to achieve that:

Step 01: Login to Your Blogger Account and Click on Customize Pages

Step 02: Select Advanced from the side menu then Add CSS

Step 03: If you've already inserted custom CSS in this box, scroll down to the very bottom of your code

Step 04: Add the following CSS code to the box

/* Blogger Floating Menu by getwebinfo.com */
#navbar {display:none}
#PageList1 ul {
height:30px;
background-color:#ffffff;
width:100%;
max-width:1100px;
z-index:1000;
}
Step 06: Now just Save your Blogger Template

Step 07: Click on Edit HTML button of your blogger

Step 08: Right before </head> in the code, paste the following code

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<!--Blogger Floating Menu by Get Web Info.com-->
<script type='text/javascript'>
//<![CDATA[
$(function() {
        var nav = $('#PageList1 ul');
    var navHomeY = nav.offset().top;
    var isFixed = false;
    var $w = $(window);
    $w.scroll(function() {
        var scrollTop = $w.scrollTop();
        var shouldBeFixed = scrollTop > navHomeY;
        if (shouldBeFixed && !isFixed) {
            nav.css({
                position: 'fixed',
                top: 0,
                   });
            isFixed = true;
        }
        else if (!shouldBeFixed && isFixed)
        {
            nav.css({
                position: 'static'
            });
            isFixed = false;
        }
    });
});
//]]>
</script>

Step 09: Save your Changes and view your page Now.

Note: If you have problems with the menu not doing what it should, it could be matter of having duplicate jQuery scripts in your blog code. Try removing the first line of the code (show again below and save)

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>

I Hope this article is really helpful for you and if you like this article or this article is really help you out so please share it to your social media accounts thanks.





No comments:

Powered by Blogger.