Build A Fixed Divi Menu

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

Getting Started

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

CSS CODE


/* 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;

Video Tutorials

Need Help?

Hire Us For Your Project

Related Posts

Join the conversation

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *