How to enable Fixed Navigation in Divi 4?
The long awaited Divi Theme Builder has arrived and we are now able to design our website headers using the Divi Builder. Unfortunately there is no setting (as of yet) to turn the Menu or Fullwidh Menu module into a fixed bar, that always stays visible on top of the page when you scroll down. So in this tutorial I’d like to show you a possible solution.
Making the header fixed at the top of the page
The simplest (though not really ideal) solution is to use this bit of CSS for your header section:
position:fixed;
top:0;
width:100%;
z-index:99;You can add this code in the Advanced tab of the section settings (in the main element CSS box), and it will make your section “sticked” at the top of the page. Unfortunately this only works well if your header is narrow. But if your header area is big – making it fixed may not work well, as it might cover to much space of the browser window, especially on screens with smaller resolution.
Create a separate Slide-In section!
What I think would work well in some cases is an option to use a completaly separate design for the “fixed” header and keep a different look for the “normal” header. This is what I mean:
Read on for the step-by-step instructions on how to recreate this effect or, if you are a Divi Lover subscriber, download the pre-designed header layouts with sleek slide-in navigation, which you can simply import and use on your projects!
Free Resources for Divi Lovers
Join our newsletter to get the good stuff!
We’ll provide you with updates on new tutorials, webdesign assets and special offers. Get top quality Divi goodies straight into your inbox! Read our Privacy Policy to learn how we manage and protect your submitted information.
Sign up to download
Get access to this layout and all the free resources made exclusively for our subscribers!
Already subscribed?
Fill the signup form and if you’re on the list it’ll get you straight to the download page!
Can’t see the form? Click here
Step 1. Create two header sections
This approach allows us to design a completaly different look for each header state. Let’s say you have two different logo images, a big one, used as a main logo in the centered navigation, and a horizontal logo version, which can be used for a slide-in fixed nav. Or, a different scenario, you don’t need the full navigation on the fixed nav – maybe you’d just like to keep a call to action button to draw your visitor attention. With two separate header sections possibilities are endless!
Create each section using the Divi Builder. Add a custom CSS class of dl-fixed-header to the second section. We are going to hide it with CSS and then use a simple JavaScript function to show it after the page has been scrolled by certain number of pixels.
Step 2. Add the CSS code
Add this CSS code to your Theme Options or your child theme stylesheet. Note that we are setting the top position to 0. Instead of moving it outside of the viewport with the top:-100% we are going to use the transform property with transalteY, which is apparently better/smoother to animate with transition (performance-wise).
body:not(.et-fb) .et_pb_section.dl-fixed-header {
position:fixed;
top:0;
width:100%;
transform: translateY(-100%);
transition: 0.3s transform ease-in-out;
z-index:99;
}The :not(.et-fb) selector will make sure our header is being fixed only on the frontend and not when the Divi Builder is enabled, otherwise it might be a bit hard to access the section settings and other Builder controls.
The CSS code below will make sure the fixed section is dispayed correctly for the logged in users (when the admin bar is enabled):
body.admin-bar:not(.et-fb) .et_pb_section.dl-fixed-header {top:32px;}
@media (max-width:782px) {
body.admin-bar:not(.et-fb) .et_pb_section.dl-fixed-header {top:46px;}
}
@media (max-width:600px) {
body.admin-bar:not(.et-fb) .et_pb_section.dl-fixed-header {top:0;}
}And the final bit of code, when the header gets a custom CSS class of dl-scrolled (which we are going to add dinamically with jQuery in a moment), this will transform it back to its default position:
body:not(.et-fb) .et_pb_section.dl-fixed-header.dl-scrolled {
transform: translateY(0);
}Step 3. Add the JavaScript
Add this jQuery code to the Code module on the page or to the Divi Theme Options -> Integration tab. You can also enqueue the custom JS file via your child theme. I wrote a separate blog post with detailed instructions on adding JavaScript code to Divi.
You can change the 150 value to one that matches your design. It is a number of pixel the page needs to be scrolled before the fixed header slides down.
<script>
jQuery(document).ready(function($){
$(window).scroll(function(){
var topOffset = $(window).scrollTop();
var fixedSection = $('.dl-fixed-header');
if (topOffset >= 150) {
fixedSection.addClass('dl-scrolled');
}
else {
fixedSection.removeClass('dl-scrolled');
}
});
});
</script>And that’s it! This is all the code you need to create a slide-in fixed section. Hope you’ll find it useful, I’d love to see how you implement this with your websites, share your headers in the comments below!
Grab the Free Slide-In Fixed Header Layouts!
I created a three different header designs, which Divi Lover subscribers can download and use on any Divi website! Each layout includes a standard and a fixed header sections with some custom styling. Check out the demo page and feel free to download the JSON files!
Thank you for this tutorial. Is there a way to include the Top Nav (secondary – the one with search and social icons) in Divi Theme Builder?
Vey nice, looking to use it on my next project, should I worry about the duplicate navigation and impact on SEO?
I am not an SEO expert, but I’d say there is not much to worry about. Of course, it would be ideal to use just one navigation and style it separately for mobile, but I don’t think that this method is going to hurt your Google rankings.
Ok thanks Ania!
I decided to go with this header – however I do have a problem trying to make the background on the default header transparent. I have tried lots of things but I am at a loss. Is the body being pushed down:
http://milnyardbusinesscentre.co.uk/home-working/
I want to look like this:
http://milnyardbusinesscentre.co.uk
Any ideas! Thanks in advance!!
You should try setting the position of your header to fixed – that will move the rest of the page content below it.
I love your exemples, but they dont’t behave well with woocommerce category/tag pages. Any suggestion ?
Thank you very much any way, very inspiring !!
Can you share a link on what exactly seems to be a problem?
This trick was working until a Divi update to 4.5.3 (I was using it in 4.4.2)
Any ideas on why that would be, or if you have experienced this?
Need to update Divi because of the security issue.
Thanks Ania!
Hi Matt, the demo page is working on Divi 4.5.5 with no issues.
Hi Ania, this is great! Thank you for this. How can I customize the dropdown menu font as well as make the submenu wider on theses menus?
Best post I have seen on the subject thank you so much
Awesome post. Thank you Ania
What a great tutorial!
But I have an issue when using a boxed layout. The fixed header runs out to the right on desktop and mobile view.
And it kicks in way too late in mobile view.
Is there any solution to that as I´m not an expert in css and Java… 😉
Thanks and keep up the great work!
Sincerely, Kai from Germany.
The site I´m talking about is:
https://sst.sagehorn-marketing-services.de/
It´s a staging site and not finished yet.
In the CSS, instead of
for the fixed-header use
And you can change the offset value in the JS code to show it sooner. If you need different values for deskop and mobile you’d need to modify jQuery code and set different variables depending on the browser width. Maybe this will help.
Thanks Ania, another great and above all practical tutorial. A usable solution for a common issue
What program are you using as your code editor?
I’m using Coda app (from Panic).
The Menu is not working on mobile it shows the # sign .
please help out this layout is really very pretty I want to use it.
The demo page seems to work fine, not sure what is happening on your site, would need to see it live, please share a link.
Hi Ania, I love this Slide-In Fixed Header and it works fine on normal pages. But when I use it with Woocommerce-Pages, it no longer works and both sections are visible at the same time. Any Ideas how to fix it?
Can you share a link? The JS is most likely not being loaded on the page.
Yes, I also think it´s a JS problem.
I give you a link …
Thanks Ania, thank you so much for yet another awesome tutorial for us!
Even though I am a Divi Toolbox user (which makes my life a lot simpler) it is good to know how to do this.
It’s seems simple and elegant and you explain it so well.
Thanks so much for your efforts!
You’re welcome, Hurri. Thank you for your kind words 🙂
Super cool! love this great work and ideas.
Thank you…
Happy to help 🙂
This is the best Christmas present anyone has ever given me!!! THANK YOU SOOOOOOO MUCH! Happy Holidays!
Glad you like it! 🙂
Wow, this is better than what I was using so far! I have a question, when you add the position: fixed; with a Divi Global Header, it always moves the body content up and sometimes above the header. (I saw it happen in your video too.)
What would you recommend as the best solution? I’m guessing you have to add top padding or margin to every page. Just wondering what you do as a fix for that.
Thanks for the awesome tutorial – love how you even detail the code. (PS – looking at Divi Toolbox plugin now too.)
It does happen with the simple fixed (and always visible) header – the content is below the header. The simplest solution is to add enough top padding to first section on every page, but this Slide-in header does not have this issue, as standard (not fixed) header is always at the top. Hope this makes sense ^^
This is great!
Should be a standard part of Divi, along with the new theme builder. Very cool & easy to use. Thanks!!!!
Thank you! This is a great solution, and I love the extra control I will have to design both headers. Will this be added to Toolbox?
I’m glad you like it 🙂
It’s already available in Toolbox, check out the Header section (since ver. 1.5)