How To Make A Fixed Divi Header Menu On Desktop or Mobile

This quick guide will teach you how to make a fixed Divi header menu on desktop or mobile using the Divi Theme Builder or on a regular page.

#1. Create Your Fixed Divi Theme Builder Header Menu

From your WordPress Dashboard, go to Divi>Theme Builder. Create a new template, and assign where needed. In our example, we chose to assign the menu to a specific page.

Click on “Add Custom Header” and in the popup choose “Build Custom Header.”

create a fixed Divi header

In the Divi Theme Builder template, create a section and add a row with any layout you want. In our example, we used a menu module with a logo.

The main thing we need to do is go to the section settings to the Advanced tab and go down to the Position toggle. Set the position to Fixed.

create a fixed Divi header on desktop or mobile with the Theme Builder

#2. Set Fixed Divi Header for Desktop or Mobile

Use The Build-In Divi Responsive Settings

At this point you can leave the Position setting set to default, which will affect all devices, or to set it to something different per device. 

how to create a fixed Divi header menu on desktop
how to create a fixed Divi header menu on mobile

You can set your Divi header to be fixed just on Desktop, or just on Phone.

If you want to take this a step further and create a fixed transparent header, you will want to check out other tutorial on making a transparent header in Divi 4+. It’s different than it was prior to the Theme Builder, so it’s worth a look.

Fixed transparent header with Divi

NOTE: Our next tutorial is going to be special and add on another interesting dimension to this! Keep an eye out on Thursday!

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Related Posts

Leave A Response!

1
Leave a Reply

avatar
  Subscribe  
newest oldest most voted
Notify of
Maksym
Maksym

Hey Nelson, Thanks for the tutorial! I believe you remember I wrote to you on Facebook about ET issue about their fixed header. So we can see it if we compare how it looks on 1:35 and 2:42. So the header “eats” some content of 1st section and it goes up behind the header. So I found a way to fix that. In the CSS of Global Header we need to add this CSS: #main-content { padding-top: 125px; } 125px is the example of the height of the header. You can check the height of yours and change that value.… Read more »

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart