Divi Menu Position Tricks – Right align logo, Sticky Mobile Menu, Push Menu Below First Section

Divi is a beautiful theme. But we love customizing the header area so that our Divi websites doesn’t look so out of the box. Below are code snippets you can leverage that affect the position of your primary menu and its elements.

Swap Logo and Primary Menu

If you would like your logo to be on the right and your primary menu to be located on the left, this CSS will do the trick. Just add it to your theme options Custom CSS field. This simple change makes your website look markedly different.

img#logo {
float: right;
}
div#et-top-navigation {
float: left;
padding-left: 0 !important;
}

Sticky Mobile Menu

Let’s say you want your mobile users to easily access the primary menu. If you have pages that run quite long and don’t wish to have a ‘scroll to top’ arrow, there’s going to be some scrolling involved. In this case, it may be wise to affix your menu to the top of the screen just as it does for your desktop users. Add the following to your Custom CSS.

@media only screen and ( max-width: 980px ) {
.et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important;
}
}

Primary Menu Below First Section (two examples)

OPTION 1: Pure CSS for Standard Section, Fixed Navigation Disabled

Step 1: Add the CSS

Page Specific: Click on the settings symbol in the Divi Builder, and you’ll see a screen appear where one can modify the entire page. Insert the following custom code into the Custom CSS field.

@media (min-width:981px){
.custom_section .et_pb_section_0 {
position: absolute;
top: 0%;
}
#main-header{
position: absolute;
top: 90%;
}
}

Step 2: Add custom_section to the CSS class in your first section.

Step 3: Make your standard section full screen by adding CSS to the section’s main element field. You may have to adjust the below example.

height: calc(100vh - 53px);

Tip: Simply adding height: 100vh; will likely cause some of the section to appear below the screen. This is the reason for the calculation. The minus 53px trims the bottom of your section by 53px to account for the primary menu.

OPTION 2: CSS & JS for Fullwidth Section and Fixed Navigation

Let’s assume you want your menu to appear at the bottom of the screen underneath a fullwidth header. And you would like the primary menu to stick to the top as the user scrolls down the page. Here are steps to make the change either globally (across the site) or page specific.

Step 1: Create a Fullwidth Header section

Step 2: Add the CSS

Sitewide: Paste the code below in the Custom CSS field.
Page Specific: Click on the settings symbol in the Divi Builder, and you’ll see a screen appear where one can modify the entire page. Insert the following custom code into the Custom CSS field.

#main-header {
position: absolute;
top: auto;
bottom: 0;
}

Step 3: Add the javascript

Sitewide: Go to your WordPress dashboard > Go to Divi > Continue to Theme Options > Open the Integration tab > And paste the following code in the ‘of your blog’ field.
Page Specific: If you want to add the code to one page in particular, you can do that through the Code Module. Within a Standard Section, add a Code Module and insert the following.

<script text="text/javascript">
jQuery(function($){
$(window).bind('scroll', function() {
var windowHeight = $(window).height();
if ($(window).scrollTop() < windowHeight) {
$("#main-header").css("position","absolute").css("top","auto").css("bottom",0);
}
else {
$("#main-header").css("position","fixed").css("bottom","auto").css("top",0);
}
});
});
</script>

Display Mobile on Desktop & Adjust the Mobile Menu Width

If you want your mobile menu to display on every device, add the code below. Because the mobile menu width is 100%, it will look very wide on desktops, which is why we added lines 5-7. To reduce the width only for desktops to your liking, adjust the width: 70%.

@media only screen and ( min-width:980px ) {
#et_mobile_nav_menu { display:block }
#top-menu-nav { display:none; }
} 
@media only screen and ( min-width: 981px ) and ( max-width: 1350px ) {
.et_fullwidth_nav #main-header .container { width: 70% !important; }
}