full_width_menu_module

Let jQuery make your full-width menu module sticky / fixed

In this short tutorial I’ll show you a quick approach on how to use Divi’s full-width menu module. We are going to put it on a blank page. After a few lines of code, the menu will turn and stay fixed at a certain scroll height. Perfect if you want to have content before the menu. Are you ready ? Let’s go !

( If you can’t wait – you can test the result here : PREVIEW NOT AVAILABLE ANYMORE )

Create a new blank page in Divi

So you can test this tutorial and create something yourself, let’s go ahead and bring up a new page in the Divi Builder. Use the template for a “blank page”. This will result in page without having the default primary menu on top. Add some content to the page. For this tutorial I created a test page with the following layout:

 

As you can see I added the full-width menu module not at the beginning, but after the first full-width header. The only important setting here would be to give the full-width section (which contains the menu) a custom CSS ID like fixed_floating_menu . The rest of the page you can fill however you like. Just make sure to make the content long enough for you to be able to scroll down a bit.

Now we are ready to add the magic. Save your test page and head over to your WordPress Dashboard > Divi > Theme Options > Integration > head code and Copy paste the following javascript snippet

jQuery

<script type="text/javascript">
jQuery(document).ready(function() {
var container = jQuery("#fixed_floating_menu");
var menu = jQuery("#fixed_floating_menu .et_pb_fullwidth_menu");
var pos = container.position();
jQuery(window).scroll(function() {
var windowpos = jQuery(window).scrollTop();
if (windowpos >= pos.top) {
menu.addClass("stick");
container.addClass("hold");
} else {
menu.removeClass("stick"); 
container.removeClass("hold");
}
});
});
</script>

 

Now, we need some lines of CSS. You can put this right into your main Styles.css or whereever you prefer:

.stick {
position:fixed;
width:100%;
z-index:1000;
top:0
}

.hold {
height:80px;
}

That should be it.

You did it !

If everything worked well you should have a similiar result like I got on this test page: PREVIEW NOT AVAILABLE HERE . You should see the full-width menu module turn fixed / sticky after it reaches the top.

If something didn’t work out leave us a comment here, or visit us on Facebook / @teqme