How to Make Your Divi Navigation Start at the Bottom, Then Stay Fixed at Top When Scrolling

Posted on July 16, 2017 by in Divi Resources | 35 comments

How to Make Your Divi Navigation Start at the Bottom, Then Stay Fixed at Top When Scrolling

In today’s Divi tutorial we’ll show you, step by step, how to make a fixed navigation on your website when scrolling and after you’ve passed the height of your fullscreen. If you follow the steps in this post and recreate the fixed navigation, you’ll see that the navigation will bring a nice interacting effect to your primary menu and to your website in general.

We’re going to start off by creating a normal vertical navigation on the screen. Instead of being at the top of the page, this navigation will be pushed to the bottom of the screen. After scrolling and once you’ve passed the menu height of the screen, you’ll see that the menu will change its position and will get placed on the top of the page. Once the navigation becomes fixed, it will remain fixed throughout the rest of the page. But once you scroll back to the hero section, the navigation will behave normally again and will get placed at the bottom of the hero section.

You could say that the page will ‘pick up’ the menu at the bottom of the screen and give that advanced effect that you are looking for. To help you visualize the result we’re trying to achieve, let’s take a look at the final result:

Hero Section: Fullwidth Header Module with Fullscreen Mode

There’s one thing to take into consideration when you’re going to use this effect for your website; you need a fullscreen mode Header Module. Theoretically, you can apply this to other modules and sections as well, but you’ll have to make some modifications to make sure the menu appears at the bottom of that section. The fullscreen option Divi offers makes sure the hero section fills the screen (whatever the measures of the screen might be), that’s why we recommend using it if you want to apply this effect to your menu.

Start by opening or creating the page where you want to add this effect. Next, open the Fullwidth Header or create it and go to the Design tab. The first thing you’ll come across in the design tab is the Layout subcategory. Go ahead and enable the Fullscreen mode in that subcategory.

Creating the Fixed Navigation When Scrolling

To add the effect to our website, we’ll need to make use of both some CSS code lines and some jQuery code lines. The CSS code we’ll be using will put the navigation at the bottom of the screen and will make it behave like a normal footer before the jQuery code is activated. After that, the jQuery code lines will take over from the custom CSS code and will let the navigation behave according to your position on the website.

Add The Required CSS Code

We’ll start by adding the required CSS code to our website. Generally, there are three ways to do this. The first two ways make the code apply to the whole website. The third method makes it work for one page only.

Add CSS Code Through Theme Customizer

The first method we’ll show you lets you add the code through the Theme Customizer. This is a way of adding code is not that often used but it has some perks. One of them is that as soon as you’ve added the code, you’ll notice the changes happen in real time.

To add the CSS code, open your WordPress dashboard > go to Appearance > Customize > Scroll down the tab and open the Additional CSS tab > Add the following CSS code lines:

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

Add CSS Code Through Theme Options

Another option you have, which is also the most common one used, is adding the CSS code to the Theme Options of your Divi website. Once you’ve added the code, it’ll apply to the whole website. If you’re rather looking for a possibility that adds the effect to one page only, move on to the next possibility where you can add the code to one page in particular.

To add the code to your Theme Options; go to your WordPress dashboard > Divi > Theme Options > Scroll down the General tab and paste the following code into the Custom CSS field:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Add CSS Code to One Page Only

This possibility might be interesting if you want to apply this fixed navigation to one page only but not the rest of the website. If you’re using the fullwidth header on the homepage only, for instance, you might want to use this method.

Open the page where you want to add the fixed navigation when scrolling. Next, you’ll see the following symbol in the right corner of the builder:

Click on it and you’ll see a screen appear where you can make modifications to the whole page. Add the following code in the Custom CSS box to make it apply to that page in particular:

#main-header { 
position: absolute; 
top: auto; 
bottom: 0; 
}

Add The Required jQuery Code

The next step we want to take is adding the jQuery code to our WordPress website. This code will start to work from the moment you scroll. We can add the jQuery code in two ways; through the Theme Options or through the Code Module. If you want to add the code to one page only, you can use the Code Module in combination with the third possibility we mentioned for the CSS code in this post.

Add jQuery Code Through Theme Options

To apply the code to all the pages on your website, you can add the code to the Theme Options. Go to your WordPress dashboard > Go to Divi > Continue to Theme Options > Open the Integration tab > And paste the following code in the ‘<head> of your blog’ field:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Add jQuery Code Through Code Module

If you want to add the code to one page in particular, you can do that through the Code Module. In the previous part, where we’ve added the CSS code, you must’ve chosen the last option.

Go back to that page and add a Standard Section to the top of your page. Within that Standard Section, add a Code Module. You can actually place this section wherever you like, but if you want to find it quickly, we recommend you put it at the top of your page. Next, copy and paste the following code into the Content Box of your Code Module:

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

And that’s it! The code should now work, transform your menu and make your website a bit more interactive.

Final Thoughts

In this post, we showed you how to create a fixed navigation when scrolling. We provided you with some CSS code lines and some jQuery code lines that should do the trick. If you’ve followed this post step by step, you should be able to get the final result. If you have any questions or suggestions for upcoming posts; feel free to leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by DenisXize / shutterstock.com

35 Comments

  1. Do you have a live website where this can be viewed? Thanks.

  2. Awesome! Love that you gave clear instructions for CSS and Javascript integration for global site use or individual pages. This is great for a special landing page CTA. I will definitely be using this!

    Thanks for sharing!

  3. looks awesome, but an example would be appreciated

    • I agree it looks great but would also love to see a demo of it in action 🙂

      • Add me to the list who would love to see a demo; I have been taking Divi for a testdrive all day and thought to myself (once I figured out how to add the menu), man, it would be nice if this could position the menu right on the fold and have it ‘dock’ once it got to the top. Boom—stumbled on this post!

        • …and just to add that this would be a great feature that you could simply toggle in the menu section of Divi! Food for thought. 😉

  4. Great info, so long awaited, thank you very much! This was a big mysterium till now!

  5. Thx is good

  6. Josh Hall

    Great tutorial! I was wanting to create this effect on an upcoming site but wasn’t sure of the best way to go about it. Perfect timing 🙂

  7. Hello Donjete,
    I like this effect, thank you very much for the tutorial!
    May I ask
    1)
    What happens if a visitor has deactivated JavaScript? Will they see no navigation at all, or will the navigation be (just) at the top as per usual?
    2)
    What exactly happens to this effect on mobile screens with the Hamburger (icon) navigation? Do I have to add some media queries to prevent any trouble?

    Thanks a lot!

    • I just implemented this on my test site and there is an issue with the mobile menu. The links open off-page/below-visible-screen.

      I put a media query on the css and that does put the menu back at the top, but the javascript still makes the menu bar jump around if you start to scroll.

      Is there a javascript media query?

      Maybe something like

      if ($(window).width() < 960) {
      alert('Less than 960');
      }
      else {
      alert('More than 960');
      }

      • I fixed this issue for anyone having it.

        Use the following css and js if you want this to work on anything larger the 980px (the breakpoint when Divi menu switches to mobile)

        CSS:

        @media screen and (min-width: 980px){
        #main-header {
        position: absolute;
        top: auto;
        bottom: 0;
        }
        }

        JS:

        jQuery(function($){

        if ($(window).width() > 980) {

        $(window).bind(‘scroll’, function() {
        var windowHeight = $(window).height();
        if ($(window).scrollTop() < windowHeight) {
        $("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
        }
        else {
        $("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
        }
        });

        }
        else {

        $("#main-header").css("position","fixed").css("bottom","auto").css("top",0);

        }

        });

        • My bad. Had a misplaced closing bracket in the JS above.

          Here is the corrected version

          jQuery(function($){

          if ($(window).width() > 980) {

          $(window).bind(‘scroll’, function() {
          var windowHeight = $(window).height();
          if ($(window).scrollTop() < windowHeight) {
          $("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
          }
          else {
          $("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
          }
          });

          else {

          $("#main-header").css("position","fixed").css("bottom","auto").css("top",0);

          }

          }

          });

  8. My menu is still at the top when I scroll down the menu now moves to the center. If I add my background image in the Full-Width Header it does the same thing only the menu is through the center of the image. Can you give me some ideas to try to change this?

    • I’ve got the same problem!

    • Disable sticky nav in the Divi Settings Page. See if that helps. I had some wierdness and disabling that helped mine.

  9. Did anyone actually get this to work? I’ve tried the single page example on three different sites but it doesn’t work on any of them.

    If you did get it to work please post a link so we can what it should look like.
    Thanks!

  10. Did anyone actually get this to work? I’ve tried the single page example on three different sites but it doesn’t work on any of them.

    If you did get it to work please post a link so we can what it should look like.
    Thanks!

  11. Nice! This would be very useful.
    Would this work with only css position:sticky too?

  12. I get a full screen menu color, then scroll down and fullwidth header appears, scroll back up and back to blank page. Any ideas

    • Mine was doing this too & then it seemed to go away – except when the page loads, it shows the menu at the top. Then you scroll down (even a tiny amount) & it jumps to the bottom. As you scroll, the fixed nav pops up & even when you scroll all the way back up, it does stay at the bottom. Anyone know how to get it to be on the bottom when the page loads?

      • Donjete Vuniqi

        You have to use both the CSS code and jQuery code to avoid that, Jess.

        • im getting the same issue that the menu is at the top when page loads. i have both the css and javascript added to the page.

          • Same here..I’ve added the CSS and Javascript but it’s not working right.

  13. Thanks Donjete for your post, I always learn !!

    You ask for suggestions for future posts, so I put mine:

    We have the option of adding a full-screen video at the beginning of a page, either in the background of a Section or a Row. Although only the Pause option is included.

    The problem is that when it starts with the audio activated by default it can be really annoying and more being advertising.

    Maybe with JavaScript it could start the automatic playback but keeping the audio off and displaying an mute icon (or button) so that the users may enable it if they want. I do not know if Divi admits it or it may be complicated to perform.

    Anyway, thanks

  14. This only works when the theme settings have been set to “fixed navigation : disabled”.

    But how can we use this in such a way.. all pages have a fixed navigation, but only one page uses this type of navigation?

    • I have the same question!

  15. Amazing! I posted a few times on the divi forum asking for help with this exact issue. Thank you!

  16. Hello,
    Very useful information, thank you for sharing. I’ve wanted to do something like this for a long time, but I did not know how. Your great article will help me a lot.

  17. I think it is in this part of the JQuery code that will make it load at the bottom so that you do not have to scroll to force it to the bottom. I am just not sure what. I have tried several options.
    {
    $(window).bind(‘scroll’, function() {
    var windowHeight = $(window).height();
    if ($(window).scrollTop() < windowHeight) {
    $("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
    }

  18. Sadly it did not work for me!
    Maybe someone can have a look https://www.reisedeinentraum.de/test/

    Menu bar sits in the vertical center of the image.
    I want it underneath the fullwidth image.
    Anyone experienced that same issue.

    All code was applied to online this page, not to the entire site!

    Thanks a lot!
    Chris

  19. Thank you for this detailed and useful tutorial (and everyone posting about different issues and solutions they’ve found)!

    To extend this idea a bit further, how could one adjust the code to make this effect work for the filterable portfolio?

    In effect, once someone views a filterable portfolio, I would like the filter categories to remain fixed at the top when scrolling. This would be particularly useful for a large number of portfolio items, allowing the user to filter through different items without having to scroll back to the top (of the portfolio).

    Perhaps the answer to this could be integrated into another post dedicated to working with Divi’s filterable portfolio, in general. Including different design ideas, etc. 🙂

    Thanks again for your great work and all these resources!

437,821 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest