How To Resize Your Menu On Scroll

Today with a little help from jQuery we will be making your menu resize on scroll.

Before we begin this is geared toward Framework Theme users.

Step 1

For this example I will be using the Meganav menu section. But this should work with the regular section as long as you get the section id right.

Start by adding the meganav section to the page if you have not already done so. Enter the options and enable sticky menu.

You will also need to add a padding value of 0 for that meganav because we will be controlling the padding with css and jquery. You padding option should look like the picture.

padding

Step 2

Now we need to add a couple lines of css to control the size of the meganav and transitions. And just for flavor we will add a class to add a box shadow when our menu shrinks down. Remember to add your meganav id instead of the one posted below.

/* control the menu default size and transitions*/
#your-menu-id .pl-sn-pad .fix {
   padding: 1.8% 0;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}

.menu-shadow {
box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.5);
 }

If you have done everything right then you should see your menu go from really small with no padding to look about normal.

Step 3

The script we will be using is pretty basic I think it's nothing really fancy. The thing to note is to make sure you enter in the correct id so jQuery will know what to look for.

The Script is as follow: (Be sure to wrap the script in script tags <script></script> )

jQuery(document).ready(function() {
   jQuery(window).scroll(function() {
       
  // this will stop the script from running on mobiles
      if ( jQuery(window).width() > 768) {

  //this tells the script to wait till the user scrolls more than 100px
        if (jQuery(window).scrollTop() >= 100) {

  //when the user scrolls the menu shrinks and add the class of menu-shadow
          jQuery('#meganav_id .pl-sn-pad .fix').css('padding', '.3% 0');
          jQuery('#meganav_id' ).addClass("menu-shadow");
         
             } else {
  // user scrolls back up and things go back to normal
               jQuery('#meganav_id .pl-sn-pad .fix').css('padding', '1.8% 0');
               jQuery('#meganav_id').removeClass("menu-shadow");
             }
      }
    });
 });

By now you should see the magic taking effect.

Cosmetic issues

If you notice that when you scroll up and down you may see some white behind your menu as you scroll back up. To remedy this you may have to take the section below it and add some negative  top margin to it.

I found that -3% top margin  works perfectly, just be sure to set the other margin boxes to 0px.

 

Well that does it for this tutorial be sure to post any questions in the comments below.

-Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


How To Resize Your Menu On Scroll

Published on by | Add Comment

Today with a little help from jQuery we will be making your menu resize on scroll.

Before we begin this is geared toward Framework Theme users.

Step 1

For this example I will be using the Meganav menu section. But this should work with the regular section as long as you get the section id right.

Start by adding the meganav section to the page if you have not already done so. Enter the options and enable sticky menu.

You will also need to add a padding value of 0 for that meganav because we will be controlling the padding with css and jquery. You padding option should look like the picture.

padding

Step 2

Now we need to add a couple lines of css to control the size of the meganav and transitions. And just for flavor we will add a class to add a box shadow when our menu shrinks down. Remember to add your meganav id instead of the one posted below.

/* control the menu default size and transitions*/
#your-menu-id .pl-sn-pad .fix {
   padding: 1.8% 0;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -ms-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}

.menu-shadow {
box-shadow: 0px 1px 15px 0px rgba(0,0,0,0.5);
 }

If you have done everything right then you should see your menu go from really small with no padding to look about normal.

Step 3

The script we will be using is pretty basic I think it's nothing really fancy. The thing to note is to make sure you enter in the correct id so jQuery will know what to look for.

The Script is as follow: (Be sure to wrap the script in script tags <script></script> )

jQuery(document).ready(function() {
   jQuery(window).scroll(function() {
       
  // this will stop the script from running on mobiles
      if ( jQuery(window).width() > 768) {

  //this tells the script to wait till the user scrolls more than 100px
        if (jQuery(window).scrollTop() >= 100) {

  //when the user scrolls the menu shrinks and add the class of menu-shadow
          jQuery('#meganav_id .pl-sn-pad .fix').css('padding', '.3% 0');
          jQuery('#meganav_id' ).addClass("menu-shadow");
         
             } else {
  // user scrolls back up and things go back to normal
               jQuery('#meganav_id .pl-sn-pad .fix').css('padding', '1.8% 0');
               jQuery('#meganav_id').removeClass("menu-shadow");
             }
      }
    });
 });

By now you should see the magic taking effect.

Cosmetic issues

If you notice that when you scroll up and down you may see some white behind your menu as you scroll back up. To remedy this you may have to take the section below it and add some negative  top margin to it.

I found that -3% top margin  works perfectly, just be sure to set the other margin boxes to 0px.

 

Well that does it for this tutorial be sure to post any questions in the comments below.

-Cheers

About the author

Aires Dagraca, is the creative force behind Xolani Studios, a Web Design Company that focuses on bringing the best web experience to their clients. He also enjoys Gaming, Web Design, Graphic design and family time with his wife and kids. For business inquiries reach out to him here.

A special note from the author.

iHeart pagelines

Leave a Reply

Your email address will not be published. Required fields are marked *


Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match