This helpful 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 with only one Section in the Global Header Layout.
Preparing the Layout
Step 1. Edit the default Section and set a transparent background color. Content Tab > Background:
Step 2: In Design Tab > Sizing set the following options:
Width: 100%
Max-Width: 100%
Min Height: 100vh
Step 3. In Design Tab > Spacing > Padding set the following options:
Padding top: 0
Padding bottom: 0
Step 4. In Advanced Tab > CSS ID, copy/paste dt-site-header
Step 5. In Advanced Tab > Position set:
Position: Absolute
Location: top center
Step 6. Edit the Row (inside this section), and in Design Content > Background set the background color for the Row to be #ffffff
Step 7. Edit the Row (inside the section), and in Design Tab > Sizing set the following options:
Width: 100%
Max Width: 100%;
Step 8. In the Row's Advanced Tab > CSS ID copy/paste: dt-menu-wrapper
Step 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 in the custom CSS and JS code areas.
Add a new row in the Global Header Template - this one will contain all of our custom CSS and Js code.
Step 10. Switch to Wireframe mode by clicking on this icon:
Step 11. In the Row, insert the Menu module and configure it to your liking.
Step 12. Insert a new Row into the existing Section and insert two code modules:
Step 13: Edit the second Row and set the following options:
General Tab > Admin Label, set that to Utils Row
In Row's Design Tab > Sizing, enable the Use Custom Gutter and set that to 1
Step 14. In the first Code Module inside the second Row, copy/paste this 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>
Step 15. In the second Code Module inside the second Row, copy/paste this CSS code:
<style>
#dt-site-header.dt-fixed {
position: fixed !important;
}
.dt-fixed #dt-menu-wrapper {
position: fixed !important;
bottom: auto;
top: 0;
}
</style>
At this point, could you save everything and check your front end. 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 is also available to be downloaded from the link below.