A fixed navigation bar can significantly enhance the user experience by keeping your site’s menu accessible at all times, especially on tablets and mobile devices.
In this article, we will guide you through the process of enabling a fixed navigation bar on tablets and mobile devices using Divi.
Make the default Divi's Header area fixed on mobile devices
Since the Divi's Fixed Navigation bar isn't fixed on mobile devices out of the box, you can use the following steps to make it fixed at the top of the page scroll on mobile devices:
Go to Divi → Theme Options → General Tab → Custom CSS
Add the following CSS code:
/* Fixed Navigation Bar on mobile devices */
@media screen and (max-width: 980px) {
#main-header.et-fixed-header {
position: fixed;
}
.logged-in #main-header.et-fixed-header {
top: 0 !important;
transition: all .3s 0s;
}
}
Use the Theme Builder to build a custom Header
Go to Divi → Theme Builder
Click on the Add Global Header option
Choose the Build Global Header option
Click on the Green Plus Icon
to add a 1 Column RowClick the Dark Grey Plus Icon
to add a new module and add the Menu moduleAdd the Logo image to the Menu module
Edit the Row's settings that contain the Menu module by clicking on the Gear Icon
Go to the Design Tab → Spacing → Padding and set the Top and Bottom Padding to 0
Edit the Section's settings by clicking on the Gear Icon
Go to the Design Tab → Spacing → Padding and set the Top and Bottom Padding to 10px - change these values to your liking
Go to Advanced Tab → Scrolling Effects
For the Stick Position option, choose Stick at the Top
The Result:
