In today’s tutorial, we’re making 4 changes to the primary navigation. Two apply to both Divi and Extra and two apply only to Extra.

Fixed Navigation Logo Swap (Divi and Extra)

In the theme customizer, you can stylize the fixed navigation bar to your liking with changes to the background and font colors. These colors may be different than your primary menu. What that means is your logo may no longer look good against the background color you’ve chosen. You may also want a smaller or trimmed version of your logo to display in what is often a smaller area. At this time, Divi/Extra themes don’t allow us to swap out logos. Thankfully, we can apply one of the following two code snippets.

Insert the following CSS into the Theme Options Custom CSS box (Works for Divi and Extra, but is not supported by FireFox or Edge)

[css]<br data-mce-bogus="1">
/* change logo for fixed header */
.et-fixed-header #logo {
content: url(YOUR FIXED NAV LOGO URL HERE);
}
[/css]

OR

Insert the following jQuery into the Theme Options>Integration “Add code to the < head > of your blog” field (Works for Divi and is supported by most browsers)

[code lang=”js”]
&lt;script&gt;
var imageUrl = [
‘ENTER DESKTOP LOGO IMAGE URL’,
‘ENTER FIXED HEADER LOGO IMAGE URL’,
];

jQuery(window).on(‘scroll’, function() {
var $header = jQuery(‘header’);
var $logo = jQuery(‘#logo’);

if ($header.hasClass(‘et-fixed-header’)) {
return $logo.attr(‘src’, imageUrl[1]);
};

return $logo.attr(‘src’, imageUrl[0])
});
&lt;/script&gt;
[/code]

Hide Secondary Menu Items on Mobile (Divi & Extra)

The mobile menu can get cluttered because it consolidates the primary and secondary nav into one menu. In the video, I demonstrate how you can hide specific secondary nav items from the mobile menu to keep it clean. Add something like the following to your custom css. Make sure to then add the css class to each menu item you don’t want shown on mobile.

[css]

/* Hide certain secondary nav items on mobile */
@media screen and (max-width: 1200px) {
.mobile-hide {
display: none !important;
}
}

[/css]

Style Mobile Menu Icon (Extra)

By default the mobile menu icon is white with black lines. Depending on your theme design, these colors can be jarring. Add the following css to customize the colors to your liking.

[css]

/* Mobile menu background color */
.show-menu-button {
background:#67aeca;
}
/* Mobile menu lines color */
.show-menu-button span {
background:#5f0f4e;
}

[/css]

Remove Hover & Active Menu Item Underline (Extra)

Unlike Divi, the Extra theme adds an underline when you hover over the primary menu items. I’m not a fan of this look. I guess I just hate underlines if I’m being honest. If you’re in the same boat, add the following css. The first removes it from the primary menu. The second removes it from the fixed navigation.

[css]

#et-navigation > ul > li > a::before {
background: none !important;
}
.et-fixed-header #et-navigation > ul > li > a::before {
background: none !important;
}

[/css]