Building Your Global Fixed Divi Menu
The Divi Visual Builder has become so powerful over the past two years. What can be accomplished within the UI of the Divi builder is impressive! Today we are going to build a fixed Divi menu that not only looks great but uses only two lines of code.
Read Through Tutorial 👇 | Jump To Video
For this setup, we are going to use the Theme Builder to set this fixed Divi menu as a global header. Below is the theme builder on this website. The default website template is where we will create the global header.
Setting Up The Section Container
The very first thing we need to do is create a section to house the global menu.
CSS Blur Code For Section
Copy the code below into Section -> Advanced Tab -> Main Element
/* For The Main Element of the Section Settings Advanced Tab*/ -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(15px);
Setting Up The Row Container
The row container is mostly untouched. You will have to update the width.
Setting Up The Menu Module
The menu module has some code that will need to be added in (unless you have the layout).
Menu Link Code
/* Space Menu Links Farther Apart */ margin: 0px 10px;
Dropdown Menu Container
/* Styles Submenu Container */ border:5px solid #fff; border-radius:10px; width:300px;
Dropdown Menu Links
/* Clears Submenu Link Style */ background-color: rgba(0,0,0,0); opacity:1 !important;
Hire Us For Your Project