Creating A Fixed Header In Divi
Make The Divi Header Fixed On Desktop Or Mobile
This post on how to make a fixed Divi Header on desktop or mobile is part of our ongoing our Divi header series. Once again, this tutorial is complimentary to the others. This tutorial uses the new Position features introduced in Divi 4.2 for all sections, rows, and module. It’s a great feature that allows us to make anything fixed without adding CSS code.
▶️ Please watch the video above to get all the exciting details! 👆
#1. Create Your Fixed Divi Theme Builder Header Menu
From your WordPress Dashboard, go to Divi>Theme Builder. Create a new template, and assign where needed. In our example, we chose to assign the menu to a specific page.
Click on “Add Custom Header” and in the popup choose “Build Custom Header.”
In the Divi Theme Builder template, create a section and add a row with any layout you want. In our example, we used a menu module with a logo.
The main thing we need to do is go to the section settings to the Advanced tab and go down to the Position toggle. Set the position to Fixed.
#2. Set Fixed Divi Header for Desktop or Mobile
Use The Build-In Divi Responsive Settings
At this point you can leave the Position setting set to default, which will affect all devices, or to set it to something different per device.
You can set your Divi header to be fixed just on Desktop, or just on Phone.
If you notice that the header overlaps the page content, and want a genius way to solve it, check out our other tutorial below!
Check Our Full Guide!
We made an entire tutorial and video about how to prevent fixed header overlap!
Don’t forget, we have tons of tutorials in our Divi Header series!
When the header is already at the top it is flashing/flickering when scrolling down. The sticky option works good if the element is not already sticked to the top. Is this a known bug and is there a fix for this?
Hi Jelle!
The flickering issue is a bug at the Element Themes end. You can get in touch with them for an ETA on it.
Thank you Mr. Nelson.