Enhancing your website’s navigation by making it stick to the top of the page as users scroll can improve accessibility and user experience.
In this article, we will guide you through the process of creating a fixed navigation bar that remains at the top of the screen when the page is scrolled down using Divi.
This article is based on our Blog Article called How to Make Your Divi Navigation Start at the Bottom, Then Stay Fixed at Top When Scrolling.
Disclaimer: This will work with only one Section in the Global Header Layout.
Create the Layout using Theme Builder
Go to WordPress Dashboard → Divi → Theme Builder
Click on the Add Global Header option
Choose the Build Global Header option
Step 1. Edit the Section's settings
Open the Section's setting by clicking on the Gear Icon
Go to Content Tab → Background → Background color and set a transparent color
Go to the Design Tab → Sizing and set the following options:
Width: 100%
Max Width: 100%
Min Height: 100vh
Go to the Design Tab → Spacing → Padding and set the following values:
Padding Top: 0
Padding Bottom: 0
Go to the Advanced Tab → CSS ID and set it to dt-site-header
In the Advanced Tab → Position, set the following options:
Position: Absolute
Location: Top Center
Step 2. Add and edit the Row's settings
Click on the Green Plus Icon
to add a 1 Column RowEdit the Row's setting by clicking on the Gear Icon
Go to the Content Tab → Background → Background Color and set it to White
Go to the Desing Tab → Sizing and set the following values
Width: 100%
Max Width: 100%
Go to the Advanced Tab → CSS ID and set it to dt-menu-wrapper
Go to Advanced Tab → Position and set the following values:
Position: Absolute
Location: Bottom Center
Step 3. Add the Menu module
Switch to Wireframe mode by clicking on the Wireframe Icon
Click on the Plus Dark Grey Icon
and add the Menu module. Configure it to your liking.
Click on the Green Plus Icon
to insert a new Row into the existing SectionIn this new Row, click on the Plus Dark Grey Icon
and insert two Code Modules
Edit the second Row's settings by clicking on the Gear Icon
Go to the Content Tab → Admin Label and type in Utils Row
Go to the Design Tab → Sizing and enable the Use Custom Gutter option
Set the Custom Gutter Width to 1
Open the first Code Module and paste the following JS code:
<script>
jQuery(function ($) {
var headerHeight = $('#dt-site-header #dt-menu-wrapper').outerHeight();
$(window).bind('scroll', function () {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight - headerHeight) {
$('#dt-site-header').removeClass('dt-fixed');
} else {
$('#dt-site-header').addClass('dt-fixed');
}
});
});
</script>Open the second Code Module and paste the following CSS code:
#dt-site-header.dt-fixed {
position: fixed !important;
}
.dt-fixed #dt-menu-wrapper {
position: fixed !important;
bottom: auto;
top: 0;
}Save your changes and exit the Visual Builder
Save the entire Theme Builder by clicking on the Save Changes button
The result will be that the Global header will be at the bottom of the page, and once it reaches the top of the browser window, it will be Fixed at the top.
Based on the original Blog Article: How to Make Your Divi Navigation Start at the Bottom, Then Stay Fixed at Top When Scrolling.
The complete layout can also be downloaded from the link below: