How To Shrink The Divi Theme Builder Fixed Header Menu When Scrolling Tutorial by Pee-Aye Creative

How To Shrink The Divi Header Menu When Scrolling

Nelson Miller Pee Aye Creative
Today I'm showing you how to shrink the Divi Theme Builder header menu when scrolling while keeping it fixed at the top of the page.

1. Create Your Fixed Divi Theme Builder Header Menu

From your WordPress Dashboard, go to Divi>Theme Builder. Create a new template, and assign where needed. In our example, we chose to assign the menu to a specific page.

Click on “Add Custom Header” and in the popup choose “Build Custom Header.”

create a custom fixed Divi Theme Builder header

In the Divi Theme Builder template, create a section and add a row with any layout you want. In our example, we used a logo, menu, and button.

The most important part here is adding the CSS class to the section. Go to the section settings to the Advanced tab and add the class “pa-header” as shown in the image below.

Builder the Divi Theme Builder header and set default background color and add class

Be sure to set the header section position!

Go to the section settings to the Advanced tab and go down to the Position toggle. Set the position to Fixed.

set the position of the Divi header to fixed.png

2. Add Some Custom jQuery Code

This Code Will Add A New CSS Class On Scroll

Now for the fun part! You don’t have to worry about adding code because I’ll show you exactly where to add this, and you will do just fine copying it to your website!

Where To Paste The jQuery Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

<script>
jQuery(document).ready(function(){
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();

if (scroll >= 100) {
jQuery(".pa-header").addClass("pa-fixed-header");
}
else{
jQuery(".pa-header").removeClass("pa-fixed-header");
}
});
});

</script>

Here’s how that will look!

add code to Divi to make the header menu fixed on scroll

#3. Add Some Custom CSS Code

This Code Will Shrink the Divi Menu Items When Scrolling

In step #2, we added some jQuery code that activates a new CSS class in the header section when the page scrolls. Now, we need to tell that class what to do. In our other tutorial, we were changing the background color, but in this one, we are going to change the top and bottom spacing and maybe a few other items.

Change The Spacing

Copy and paste the following code snippet into your website.

Where To Paste The CSS Code

1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.

2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.

3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.

If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.

/*set the transition for the spacing shrinking action*/
.pa-header .et_pb_row {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

/*set the background color of the fixed header when scrolling*/
.pa-fixed-header .et_pb_row {
	padding: 0px 0;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

Change The Logo Size

You may also want to change the size of the logo when your menu shrinks. To do this, we need to add the following code snippet to our previous one.

/*set the transition for the logo shrinking action*/
.pa-header .et_pb_menu__logo img {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

/*change the logo size when the header shrinks*/
.pa-fixed-header .et_pb_menu__logo img {
	max-width: 80%;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

Change The Menu Text Size

You may also want to change the size of menu text when your menu shrinks. To do that, just add the following code snippet to our previous one.

/*set the transition for the font size shrinking action*/
.pa-header .et_pb_menu ul li a {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

/*change the menu font size when the header shrinks*/
.pa-fixed-header .et_pb_menu ul li a {
	font-size: 16px!important;
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

86 Comments

  1. Shawn

    Hi Nelson, I followed step by step and couldn’t get it to work. I wasn’t able to see the effect on my site. Can’t figure out what I’m doing wrong. Thanks again.

    Reply
  2. Shawn

    Hi Nelson, I noticed why it wasn’t working because I had padding set on the row when I removed it it started working. The issue is when I remove the padding from the row my menu looks ugly, becomes to big. What can I do to fix that issue? Thanks

    Reply
  3. Catie

    So, I followed step-by-step, and while my text and logo will change, I can’t get my actual header background (which is an image) to also shrink. Do you have a tutorial on how to do that?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Catie,
      To target the section, just remove the .et_pb_row from that snippet and use that. Then do whatever you want, such as reduce the spacing. Does that makes sense?

      Reply
  4. Serhij

    Hi Nelson! Thank you for your work! Content on you blog is amazing! Also I have one question. I followed all steps above and it worked perfectly, but there is one little thing I’m not able to solve. While on tablet and mobile view, menu changes to the hamburger icon. Problem is, that shrinking and changing color doesn’t apply on that icon and it stay as I customize it in the theme builder. Can you help me with that? 🙂
     

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Sehij,
      I’m not exactly sure what you mean, but I am guessing you want to change the size of the hamburger icon on tablet and phone when you scroll?

      Reply
      • Serhij

        Yes, I want to change size and color of hamburger icon.

  5. Ingrid

    This is great! I tried the one from Elegant Themes that took me too long and didn’t work. This is SUPER simple. Thank you!

    Reply
  6. Bongi

    Hi Nelson, I followed step by step and it work perfectly.
    How can I do the same thing to the search modul inside the header next to the menu?
    What CSS code must I insert to shrink the search box?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Bongi,
      It will require finding the CSS classes of the search module as well as the property you want to change. If you share a link I can help you out!

      Reply
  7. Alex

    Hi Nelson. Thanks for your generous tutorials!

    My header is shrinking so long as I leave the ‘row padding value’ as default/blank in the builder. How can I make it shrink if I want to alter the padding size in the builder first?

    Also, I’ve taken your advice and created a child theme. But I’m confused as to where I should put the <script> code you have above in the child theme?

    Best wishes to you!

    Reply
  8. Mark McGowan

    Hi Nelson,

    Great tutorial, as ever, thanks! I’ve got the header shrinking, but I can’t figure out what I’ve done wrong, as it’s ‘covering’ the top of the content?

    Example here:

    http://markm73.sg-host.com/projects/

    If you could advise what I’m doing wrong, I’d be massively grateful!

    Thanks,

    Mark

    Reply
  9. Manuel

    Hi Nelson, thank you so much for doing this channel here. I tried all the manual what you show and it works. Now I want to scale a Image Template and the code is for a Logo. You have some Code for scale a image what i can put under the divi option custom css? Thank you for your answer.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Manuel,
      Do you mean you want to do this to an image that is not the logo? I think if you replace .et_pb_menu__logo with .et_pb_image or just take it out completely this will work.

      Reply
  10. Sadman Sakib

    Hi Nelson,
    Thanks for this tutorial. I was copying your code and pasting but it was not working. But when I looked carefully that your snippet code and the image code is not the same. I think there is something wrong. I hope you will check it.

    I think the code will be this

    /*set the default background color at the header section*/

    .pa-header{
    background: transparent;
    }

    /*set the background color of the fixed header when scrolling*/

    .pa-fixed-header{
    background: white;
    }

    By the way thanks for the life saving tutorial.

    Reply
      • Sadman Sakib

        Please go to that section of your post. You will find that.

      • Sadman Sakib

        Check out the attached image.

      • Sadman Sakib

        Thank You Nelson. This is the only tutorial that solved my problem in the easiest way.

  11. Mickey Diener

    Hi Nelson,

    As always, thanks for this tutorial.

    For my custom header, I have 3 columns. One is an image (instead of using the logo of the menu), next is the menu and the last column is a button.

    I am having issues determining the right class to target for the image in column 1 and the button in column 3. I’ve determined that for shrinking the button the CSS I need is something like:

    padding-top: 0px !important;
       padding-bottom: 0px !important;
       font-size: 15px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;

    However, I can’t seem to target it correctly. So far, I see that there are other settings overriding the .fixed-header class settings.

    I haven’t worked out how to shrink the image yet but, again, am having issues identifying the correct CSS class to target.

    The URL for this test page is https://dev.jwoc.info/home-new-header/. Could you take a look?

    Thanks!

    Reply
      • Mickey Diener

        Hi Nelson,

        I had changed the class from .pa-sticky-header to .jwoc-sticky-header in the section and in the code itself. I wanted to identify it more closely with my client but did make an attribution in the code itself.

        Thanks!

      • Nelson Lee Miller (aka The Divi Teacher)

        I see the issue, wrong class. It’s .jwoc-fixed-header, not sticky 🙂

        .jwoc-fixed-header .et_pb_image img {
        background: red;
        border: 2px solid red;
        }

      • Mickey Diener

        Thanks again, Nelson. Sorry, I had documented this to you incorrectly. OK, so the class assigned to the section is .jwoc-header. From the Jquery code in the head section, it changes to .jwoc-fixed-header.

        I was able to target the image in column 1 based on your suggested code above, but I cannot seem to target the button in column 3.

        Here’s the CSS code I have in Divi Options to try to target the button to shrink, but it’s not working. Looking in dev mode on the browser, it seems that this is being overridden. I’m wondering if I am targeting the wrong element.

        /*set the transition for the button shrinking action*/
        .jwoc-header .et_pb_button_0_tb_header {
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        }

        /*change the button size when the header shrinks*/
        .jwoc-fixed-header .et_pb_button_0_tb_header {
        padding-top: 0px !important;
          padding-bottom: 0px !important;
          font-size: 15px;
        -webkit-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -o-transition: all .5s ease;
        transition: all .5s ease;
        }

        Thanks!

  12. Les Hunt

    Is there a way to control the height of the shrunken menu bar?

    Reply
  13. Evan

    Very nice. Much better than Divi’s official tutorial.

    Reply
  14. Mike Beato

    Hi Nelson,
    Great tip, as always!

    One issue I have: If I scroll down, the header shrinks and is styled correctly. But if I’ve already scrolled down the page — then click refresh — the header is displayed again in its original size and style UNTIL I scroll even one pixel. Then it realizes it’s down 100 pixels and THEN repaints the header correctly. Is there a way around this??

    Here’s the dev page I’m working with: https://northeasterncommercial.com/ with password of ‘opus’

    Reply
    • Hemant Gaba

      This is happening because the change in the header is under the scroll function so without scrolling a bit the change will not occur. Here the workaround is to add a single line after the ready function starts and the line is

      jQuery(window).scrollTop(0);

      Please try this code and let us know if this solves the issue or not. 🙂

      Reply
  15. Ron

    How do we get it to work on the mobile fixed header?

    Reply
    • Hemant Gaba

      This solution will be implemented on all the screens, in the mobile header as well.

      Reply
  16. Victoria Winfrey

    This is amazing! It worked sooo well for me. I did have a quick question, is there a way to prevent another element from moving up when the logo and text shrink? I have a button that is off-center on the scroll that I would love to fix. TYIA this is very cool solution.

    Reply
      • Victoria Winfrey

        So I ended up using a CSS work around but here is what I was trying to do: I wanted to have a button as the last menu item, but I was using the inline center logo menu style and the shrinking header info from above. Without the CSS solution, the only way to add the button was to add it as an element and use spacing to get it inline with menu. It looks good on the top but would shift out of line when you scroll and the header shrinked. Honestly this approach wasn’t the best and I wouldn’t recommend it but I wanted to clarify in case some other nutter tries this haha.

        TL;DR I was wondering if there was a way to add CSS that shrunk the button element to keep it proportional and inline.

      • Hemant Gaba

        One way to add a button to the Menu can be to add one more Menu Item to the Menu by going to the WordPress Dashboard > Appearance > Menus and then you can style that Menu item to display it like a button. Please try this approach and if you get stuck somewhere then comment the URL of the page and we will try to help you with that.

  17. Mike

    Hi Nelson, it works perfectly on all pages BUT on product pages !!
    I mean, the logo and menu are shrinking but the background color of the header keeps the same size. Thanks.

    Reply
    • Hemant Gaba

      This is weird behavior. Could you please share the URL of the product page for us to investigate further?

      Reply
      • James Hayward

        Hi Nelson – Some reason have the same issue happening. Evering is working except background.
        James
        p.s just purchased the Divi Carousel Maker- it’s great!

      • Hemant Gaba

        We are glad that you liked our Divi Carousel Maker. 🙂
        Could you please share the URL of the page so that we can investigate further?

      • Mike

        Hello Hemant, here is the link :

        https://www.createursdemondes.fr/boutique/createurs-de-mondes-1/

        This is related to WooCommerce (product page).

        I also have an issue with the header as it’s not responsive at all !!
        If you try on a bigger resolution screen (4k for example), you can see that the header’s menu is outside the header background.

        I put a fixed minimum height for the section, but the line inside it passes over on big resolution screens.

        Do you think we need to use VH instead of PX to make it fully responsive ?

        Thanks.

      • Hemant Gaba

        Mike, is the issue already fixed now as I am not able to see any issues in the responsiveness of the header?

  18. Marc W Rabinowitz

    Can you do this with a transparent header? I used absolute to make my transparent header from one of your other tutorials. I can’t seem to get it to work with my current settings. Thoughts?

    Reply
  19. Ollie Tubb

    Hi Nelson,

    Thank you for all your great tutorials.

    I am struggling to get this to work on a couple of development sites I am working on. I am sure we can just look at one and it will be the same solution. I have included it below.. I have added the css class and added the js and css to their respective correct places but it does not work.

    Can you please check for me.
    Many thanks,
    Ollie

    Reply
    • Hemant Gaba

      The issue is happening because of the presence of two menu modules and the image module that is used for the logo. The snippet in the guide is the generalized solution for all the standard Tb headers. To make the header in your provided URL shrink, please go to the Divi > Theme Options > Custom CSS Panel and place the code given below:

      .pa-fixed-header .et_pb_menu{
      padding-top: 5% !important;
      transition: all 0.2s ease-in-out;
      }
      .pa-header .et_pb_menu{
      transition: all 0.2s ease-in-out;
      }

      .pa-fixed-header .et_pb_image{
      transition: all 0.2s ease-in-out;
      }

      .pa-fixed-header .et_pb_image{
      width: 33% !important;
      }

      .pa-header .et_pb_image{
      transition: all 0.2s ease-in-out;
      }

      Let us know if that helps. 🙂

      Reply
  20. Danny Gibson

    Hi There 🙂

    This tutorial worked great! Accept for on mobile. The logo shrinks but the section actually enlarges a little bit. Do you know how to fix this?

    Reply
    • Hemant Gaba

      Hi Danny,
      Could you please try this snippet and see if that helps?

      @media all and (max-width: 980px){
      .pa-header .et_pb_column_0_tb_header{
      transition: all 0.5s ease-in-out;
      }

      .pa-fixed-header .et_pb_column_0_tb_header {
      margin-bottom: 0;
      transition: all 0.5s ease-in-out;
      }

      .pa-fixed-header .et_pb_image img{
      max-width: 70%;
      }

      }

      Reply
  21. Matt

    Thanks a lot for this great tutorial! It works as described but I wondered what the settings are to make the content below the header automatically adjust to the header size as well? So basically like the standard Divi header that pushes the content down so it automatically starts below the header? I have a very large header which covers the whole first section of the page.

    Reply
  22. Anneloes

    My (special) header section has a transparent background. When scrolling, the background of the row turns white. I would like the background of the section to be white. Is this possible? I can’t figure it out.

    Reply
    • Hemant Gaba

      Hi Anneloes,

      Could you please make sure that you are providing the Custom Class to the Section and not the Row?

      If you have given it to the section then could you please share the URL of the page for me to investigate further?

      Reply
  23. Emma

    Hey Nelson + team,

    Awesome as always, and much easier than the Divi tutorial! But… I can’t get it to work on a clients site, the header at the moment just kinda jumps.

    Could it be because I’ve built a Global Header rather than a custom header? Site is: https://www.braysolutions.com/

    Thanks,
    Emma

    Reply
    • Hemant Gaba

      Hi Emma,

      Could you please use this code and see if that helps?


      .et_pb_section_0_tb_header{
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
      padding: 18px 0 !important;
      }

      .et_pb_section_0_tb_header.et_pb_sticky--top{
      padding: 0px 0 !important;
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
      }
      .et_pb_section_0_tb_header .et_pb_image_0_tb_header img{
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -o-transition: all .3s ease;
      max-width: 100% !important;
      transition: all .3s ease;
      }
      .et_pb_section_0_tb_header.et_pb_sticky--top .et_pb_image_0_tb_header img{
      max-width: 60% !important;
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease;
      }
      .et_pb_section_0_tb_header .et_pb_menu ul li a {
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
      }
      .et_pb_section_0_tb_header.et_pb_sticky--top .et_pb_menu ul li a {
      font-size: 16px!important;
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;
      }

      Let me know how it goes. 🙂

      Reply
    • Hemant Gaba

      Hey there,

      Could you please use this code and see if that helps?

      .et_pb_fullwidth_menu_0.et_pb_sticky--top{
      top: 66px !important
      }

      @media all and (max-width: 1285px){
      .et_pb_fullwidth_menu_0.et_pb_sticky--top{
      top: 89px !important
      }
      }

      @media all and (max-width: 980px){
      .et_pb_fullwidth_menu_0.et_pb_sticky--top{
      top: 128px !important
      }
      }

      Reply
  24. Bryan Howell

    Hi Nelson,

    Thank you for your tutorials. I am having a few issues with this one however. 1. my header logo image is not shrinking. To test it with something extreme, I currently have:

    /*change the logo size when the header shrinks*/
    .pa-fixed-header .et_pb_menu__logo img {
    max-width: 5%!important;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
    }

    Additionally, I’m having a weird “growing” effect occurring to my header now on load. And finally, I tried to follow this tutorial: https://www.peeayecreative.com/how-to-automatically-stop-your-fixed-divi-header-from-overlapping-the-page-and-push-it-down-instead/ but it’s adding additional white space below my header.

    Any help you can offer would be greatly appreciated!

    Thank you,

    Reply
    • Hemant Gaba

      Hey Bryan,

      I have checked the URL provided and first of all I am not seeing any white space at the top on my end and second on the scroll you are changing the image module of the same size as the previous one and that’s why you are not seeing the shrink effect. Please change the width on scroll and see if that helps.

      Reply
  25. Daniel

    Hi Nelson! Thanks for this tutorial!

    I could get it running (shrinking) but with setting the header section position “fixed” the header uses the full witdh. What to do when using the overall box-layout? How to tell this now to the header?

    Reply
    • Hemant Gaba

      Hey Daniel,

      There is another way to achieve this, instead of giving position fixed, set the stick to top option in Sticky Options and see if that helps.

      Reply
      • Daniel

        Hey Hemant,

        that’s it! Thank you so much!

      • Hemant Gaba

        I am glad that the issue is resolved now. Please let us know if you need any further assistance. 🙂

  26. Robin

    My life would be significantly harder were it not for your tutorials. This solution worked perfectly with your other tutorials on the transparent menu and changing the menu background on scroll. THANK YOU SOOOOO MUCH!

    Reply
  27. Johnny

    Thank you! works great. At first i made mistake of setting the Css Section ID to pa-header. Works great

    Reply
    • Hemant Gaba

      You’re welcome, Johnny!

      We are glad to know that our guide helped you in some way. Stay tuned for more such guides.

      Reply
  28. John Fridinger

    This is really great, and thank you so much…!!!

    Reply
  29. JosePerdomo

    Hello Nelson,

    Great tutorial as always, I have one question though how do I control how much does it shrink because it is shrinking too much, it seems that it shrinks to the border of the image.

    Reply
  30. Wojciech

    Hi,
    I noticed a problem with the shrinking global menu. When I use anchors in sections, for example on onepage, the page slides as if the menu is not shrinked – unnecessary space is left between the shrink menu and the anchored section. I found a solution as below, but it requires you to manually enter the number of pixels you want the page to move so that there is no space.
    Do you have an idea how to automate it so that it works in a situation where, for example, we have different menus on the home page and different ones on the blog page?

    https://gist.github.com/Garconis/6d4599f79725a292ca56f869bd2e6ab3

    jQuery(function($) {
    window.et_pb_smooth_scroll = function($target, $top_section, speed, easing) {

    var $window_width = $(window).width();

    $menu_offset = -1;

    var headerHeight = 143;

    if ($(‘#wpadminbar’).length && $window_width <= 980) {
    $menu_offset += $('#wpadminbar').outerHeight() + headerHeight;
    }
    else {
    $menu_offset += headerHeight;
    }

    //fix sidenav scroll to top
    if ($top_section) {
    $scroll_position = 0;
    }
    else {
    $scroll_position = $target.offset().top – $menu_offset;
    }

    // set swing (animate's scrollTop default) as default value
    if (typeof easing === 'undefined') {
    easing = 'swing';
    }

    $('html, body').animate({ scrollTop: $scroll_position }, speed, easing);

    }
    });

    Reply
    • Hemant Gaba

      Hi Wojciech!

      Please try using the following script and see if it helps:

      jQuery(function($) {
      window.et_pb_smooth_scroll = function( $target, $top_section, speed, easing ) {
      var $window_width = $( window ).width();
      $menu_offset = -1;var headerHeight = jQuery(‘header.et-l.et-l–header’).outerHeight();
      if ( $ (‘#wpadminbar’).length && $window_width <= 980 ) { $menu_offset += $( '#wpadminbar' ).outerHeight() + headerHeight; } else {$menu_offset += headerHeight;} if ( $top_section ) {$scroll_position = 0;} else { $scroll_position = $target.offset().top – $menu_offset;} // set swing (animate's scrollTop default) as default value if( typeof easing === 'undefined' ){easing = 'swing';} $( 'html, body' ).animate( { scrollTop : $scroll_position }, speed, easing ); } });

      Reply
  31. Renaud Passuello

    Hello, this is a very nice tuto ! It works perfectly…exempt on Woo pages (category, product, account, shop…) where the behavior is different, particularly margin/padding bottom and you can see the difference here :

    – home : https://caraibes.amilo.earth/
    – Woo cat page : https://caraibes.amilo.earth/categorie-produit/filtration-amilo-pour-boisson/

    Do you think I need to add other CSS for these Woo pages ? Thanks a lot in advance for your help

    Reply
    • Hemant Gaba

      Hi Redaud!

      I have checked the page and the header doesn’t seems to be fixed as of now. Please follow the guide and implement the codes again.

      Let me know how it goes!

      Reply
  32. Bill Horvath

    Several years later, this is still a great tip. Thanks!

    Reply
  33. Daniel

    Hi Nelson, using your code, the scrolling effect on my primary menu is reversed, i.e., its smaller in position 0 and gets larger when scrolling down. What did I miss? Thanks, Daniel

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart