The release of Divi version 4.0 allows you to create your own custom header using the Divi Theme Builder and Divi modules without the need for editing theme files or using a 3rd party header plugin.
There are no built-in options to make your custom header template sticky or fixed like you were able to do in the Theme Customizer with the default Divi header.
To make your Divi Theme Builder header sticky or fixed will require you to add a little custom code that can be added via the section options for a fixed header or via a code module in your template for a sticky header.
*Download the Theme Builder template files at the bottom of the page*
What are sticky and fixed menus?
A fixed header will be fixed to the top of the screen at all times, including when the user scrolls down the page.
A sticky header will start with content above it and will stick to the top of the screen as the user scrolls down the page, while the content that was above it will disappear off the page with the rest of the content.
How to make your Theme Builder header fixed
If you want to make your custom header in the Theme Builder fixed you will need to add the following CSS code into the section that contains your header.
position:fixed; width:100%; top:0; z-index:999;
How to make your Theme Builder header sticky
If you want to make your custom header in the Theme Builder stick you will need to;
- Add a CSS ID myheader into the advanced settings tab > CSS ID & Classes > CSS ID for the section you want to be sticky.
- Add a code module below the header elements and add the following code into the module.
<script> // Adjust the number to be the same as the height of your content above window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) { document.getElementById("divi-sticky-header").style.position = "fixed"; } else { document.getElementById("divi-sticky-header").style.position = ""; } } </script>
- adjust the 150px height value to match the height of the non-sticky part of your header (in this case the 4 blurbs)
Watch the video to see how the fixed and sticky headers work with the Theme Builder
Download the Sticky & fixed Theme Builder templates
Please use the social share options below to access the download link for the sticky and fixed Theme Builder templates.
You will need to unzip the file and import it via the Theme Builder dashboard.
[sociallocker id=”227287″]
download files here
[/sociallocker]
Thanks. This is the easiest fixed-fix I have seen so far. Shared this in the Swedish Divi group, hope you don’t mind… 🙂
of course not 🙂 thanks for the share
I just had issues on mediform.se with Divi 4.4.2. Solved it by adding z-index to the section css.
How did you build the locked down files area (or with what)?
social lockers plugin
https://wordpress.org/plugins/social-locker/
Thank you for your help.
would be nice to be able to make a section sticky within the section settings by default. Until then this is a great workaround. Thanks!
yes, i think this may well happen in a future update.
Thanks. Just a question, is there a way to change the background colour of header on scrool too?
anything is possible but depends what you need. it may well just be easier to use the default header and inject content to it if you want the default header features.
..ok, I have already experienced new Divi Theme Builder for 10 hours now, and it’s simply amazing, but there are many missing options against default header. Like no top-up button, no dotted navigation and these colour changes I mentioned before. I hope this can be added to some future updates. Anyway, thank you for your tip one more time, comes handy now.
thank you for this tips. its will be better if you can show us how to make the header smaller when scroll down.
you can play around with the script in the sticky header code module and add extra style rules to do this
Great and timely how-to, thanks! One related Q… how do I hide the fixed menu on scroll down, and appear on scroll up on mobile?
Thanks, I was searching for the yesterday,
Does this method work on mobile?
yes
Hi Craig Longmuir
Thanks for the the nice tutorial and blog. Please is it possible to write full scripts code. Where you mentioned “2. Add a code module below the header elements and add the following code into the module.”
I’m just struggling scripts code as I can see you added the extra code as well for heights adjustment etc. Thank you
the height adjustment would just mean changing the two 100 on ” if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100)” this is the height in pixels of the top non-sticky section/s.
I unzipped your json sticky header and imported it in the themebuilder under portability (could not be done via divi library). Before importing i unticked allow overwrite existing content as i don’t wnat the new header to mess up what i have. it imported, but when i go and add a custom header it does not show me any imported new content. i cannt see your imported file not even in the library. when i import it and tick overwrite existing content it remove everything i have done so far. i did a backup so no harm done. even though… Read more »
theme builder templates are not divi layouts so wouldnt show in the Divi library.
But, I did notice that myself, when importing to theme builder, but not overriding, it doesn’t seem to add anywhere. i assumed it would just add as a new template that could then be assigned where it was needed. will have to experiment with that a bit more….
maby easier to just copy and paste the code above for the sticky header for now.
Thank you!
For the sticky header it didn’t work properly on mine, while scrolling the header was behind the content, i changed this following code:
document.getElementById(“myheader”).style.position = “absolute”;
document.getElementById(“myheader”).style.zIndex =2000;
and added a 1 z-index on body sections. works fine now
not sure why the extra code was needed in your case, but glad you got it working either way 🙂
I’ve done all you said but my header is miss placed like my elements under my header is behind header and my header can’t stick on top I’m confused..
you can download the theme builder template file above with a social share if you cant get it working from the tutorial
It does not seem to work with adding:
display: flex to keep everything inline on mobile devices.
I have tried it in a couple of places section >> advanced >> custom css >> main element
I am working with 3 columns: image — menu — social media
Everything else works great.
any suggestions about getting things inline on mobile
Thank you so much for this ? One question… how do we make this sticky header mobile responsive. Got your download and modified it to my business, love how it looks on desktop but on mobile it looks terrible ?
not tested yet, but the new features added here https://www.elegantthemes.com/blog/theme-releases/including-fixed-headers-floating-elements-and-new-draggable-anchors should make the process easier without the need for code
hello!
i tryed myself and then also imported the json file, but both doesnt work. i get the sticky section to stick in the position where is it, not at the top of the page. can someone help me?
You can now use the built-in Divi Sticky Options to create fixed or sticky header in just a few clicks @ https://www.divithemeexamples.com/divi-sticky-options/
Is this still working with the latest update? I can’t seem to get it to work. The added css for the fixed position is being overewritten.
Should still work, but would probably be easier to use the sticky options for this now. see https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-sticky-header-with-divis-sticky-options