This help 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 which refers to how to make the default Divi Navigation start at the bottom and then stay fixed at the top when scrolling.
Disclaimer: this will work while having a single Section as your Global Header.
Preparing the Layout
While creating a Global Header Template add a normal Section. Here are a few things we need to change:
1. Edit the Section and set the background color to a transparent color in Content Tab > Background.
2. In Design Tab > Sizing set the following options:
Width: 100%
Max-Width: 100%
Min Height: 100vh
3. In Design Tab > Spacing > Padding set the following options:
Padding top: 0
Padding bottom: 0
4. In Advanced Tab > CSS ID enter:
dt-site-header
5. In Advanced Tab > Position set:
Position: Absolute
Location: top center
6. Edit the Row (inside this main section) and in Design Content > Background set the following options:
Background color:
#ffffff
7. Edit the Row (inside this main section) and in Design Tab > Sizing set the following options:
Width: 100%
Max Width: 100%;
8. In Advanced Tab > CSS ID of this row enter:
dt-menu-wrapper
9. In Advanced Tab > Position set the following:
Position: Absolute
Location: Bottom Center
Note: all those settings and custom CSS ID will be used later on in the custom CSS and JS code areas.
In the Global Header Template, add a new row - this one will be used to housed all of our custom CSS and Js code.
Here is an example layout:
The main section has all the options and CSS ID defined at steps 1 - 3.
The first row is just the row that contains 2 code module:
one for the CSS code
one for the JS code
To make sure that this row will not interfere with our layout make sure that in Design Tab > Spacing set the Top Padding and Bottom Padding to be 0.
6. In the Row labeled "Utils Row" add 2 code modules. In the first Code Module add the following CSS code:
<style>
#dt-site-header.dt-fixed {
position: fixed!important;
}
.dt-fixed #dt-menu-wrapper {
position: fixed!important;
bottom: auto;
top: 0;
}
</style>
7. In the second Code Module add 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>
At this point save everything and check your front end. You Global header will be at the bottom of your first section 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