How to create a Floating Divi Menu Header

Every Divi user can’t wait to receive that long-awaited email announcing that the “Theme Builder” update is out! If you don’t know what it is about, I’ll tell you in advance that this update will introduce the possibility to create a custom header with the Divi Builder, but in the meantime, I want to show you how to create a Floating Divi Menu Header with only CSS code.

This hack will give a new look to your header with a few simple steps and without using any plugins.

You can see the final result by clicking on the button you see below, a new style for your menu that also integrates a call to action. Of course the menu is 100% Responsive.

First, you will have to create the structure of your primary menu.
Note: In this tutorial, the second menu is also active but it is not necessary to make the layout work correctly.

Go To: Appearance > Menus > Create a new menu

Now, if you haven’t already, activate the “Fixed Navigation Bar” function from the options panel.

The second step is to give the same height to the primary menu in default mode and in Fixed mode.

To do this go to the Theme Customizer > Header & Navigation > Primary Menu Bar

The same applies to the fixed menu settings.

The third step is to add the cta_menu class to the last item of your menu, to get a Call to Action integrated in your menu.

To do this you have to go back to the structure of your Appearance > Menus and add the CSS class cta_menu in the CSS Classes field.

Fabio, why can’t I find the CSS Classes field in my menu?
No worries, in this case, you just have to tick the option you find by opening the drop-down menu by clicking on the link “Screen Options”.

Now that we have finished with all the preliminary steps, we move on to the CSS code that will be the one that will give a new look & feel to your Divi Menu, but before copying and pasting it of your Divi site, I would like to explain how the code is composed, so you can make your changes and get the result you want.

• Main Menu Area: This part of the code refers to the Main Menu. Here you can change the background color, the border-radius and the shadow.
• Top Menu Settings: This part of the code refers to the submenu. Here you can customize the distance from the top of the page, the width and the border-radius.
• CTA Menu Setting: As you can already imagine, this part of the code refers to the CTA of the menu. Here you can customize the background, hover effect and size.
• Mobile Settings: In this last part of the code, you will find the CSS code that I added to improve some details when browsing from mobile.

/*----------
General Settings
--------------------------------------*/

/*Background Main menu normal and Fixed mode*/
#main-header, #main-header.et-fixed-header {
 background: transparent;
 box-shadow: none;
}

.et_header_style_left .logo_container {
 background: #fff;
 padding: 0px 20px;
 margin-top: 0px;
 border-radius: 0 0 4px 4px;
 box-shadow: 0 8px 50px 0 rgba(0,0,0,.08);
}

.container.et_menu_container {
 margin-top: 30px !important;
}

/*----------
Top Menu Settings
--------------------------------------*/

.et_header_style_left #et-top-navigation {
 padding: 0 !important;
}

#top-header {
 width: 80%;
 max-width: 1080px;
 margin: 30px auto 0;
 padding: 6px;
 border-radius: 4px 4px 0 0;
}

/*----------
CTA Menu Settings
--------------------------------------*/

.cta_menu {
 background-image: linear-gradient(150deg,#ffba61 0%,#ffe970 100%);
 margin-right: -1px;
 transition: all .3s;
}
.cta_menu a {
 color: #fff !important;
 padding: 30px 25px !important;
 text-transform: uppercase;
 border-bottom: none !important;
}

/*Hover settings for CTA*/
.cta_menu:hover {
 background: #46b3ff;
}

.cta_menu:hover.cta_menu a {
 color: #ffba61;
 opacity: 1 !important;
}

/* fixed header button text color */
.et-fixed-header #top-menu .cta_menu a {
 color: #fff !important;
}
.cta_menu li.current-menu-ancestor > a, 
.cta_menu li.current-menu-item > a {
 color: #fff !important;
}

/*----------
Mobile Settings
--------------------------------------*/

/*Mobile settings for CTA*/
@media only screen and (max-width: 980px) {
 .cta_menu {
 padding: 5px 20px; 
 text-align: center; 
 }
}

/* Position hamburger icon Mobile Menu */
.mobile_menu_bar:before {
 top: 11px;
}

Now that you know the CSS code better, it’s time to move on to the last step.

Go to Theme Options > Tag General > scroll to the end of the page, here you will find the Custom CSS field where you will have to paste the code or alternatively you can choose one of these 7 alternative methods to add CSS code to your Divi site.

Note: Be careful not to cut any part of the code while copying and pasting.

Save the changes and check the result.
If you have done everything correctly, you will have given your menu a new look!

Follow Me