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 | 22 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

22 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 🙂

  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!

  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?

  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.

  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?

  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.

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

401,632 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