Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

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

Nelson Miller Profile Orange
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.

▶️ Please watch the video above to get all the exciting details! 👆

#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 notice that the header overlaps the page content, and want a genius way to solve it, check out our other tutorial called How To Automatically Stop Your Fixed Divi Header From Overlapping The Page And Push It down Instead.

Fixed transparent header with Divi

Don’t forget, we have tons of tutorials in our Divi Header series!

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

10 Comments

  1. 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.
    And then change the value for all 3 devices: Desktop, Tablet and Mobile by using CSS media query.

    Reply
  2. tim

    Thank you Mr. Nelson.

    Reply
  3. ffafafe

    create two global header

    Reply
  4. Ivo Kruchten

    Hi Nelson,

    I don’t seem to get a transparent menu (position: absolute) stick to top while scrolling. Either it is fixed or transparent, but not both 🙁

    Hope you can help.

    Reply
    • Hemant Gaba

      Hey Ivo,

      Could you please share the URL of the website for me to investigate further?

      Reply
      • Ivo Kruchten

        Hi Hemant,

        I’ve struggled in the meantime, but I was able to make it work. Somehow I missed is to set the section to stick to top and to set the row’s position to absolute. This way I was able to make it transparent AND sticky.

        Our staging server is behind a firewall, so I can’t send you the link to our website.

        Thank you for getting back to me, appreciate it,
        Regards, Ivo

      • Hemant Gaba

        Hey Ivo,

        I am glad that the issue is fixed now.

        Let us know if you need any further assistance

  5. Noel Wiggins

    I added background-color: rgba(18, 18, 45 ,7)!important; to the background color to change the background color to a 70% transparency. But it still shows it 100%, Am I missing something?

    Reply

Submit a Comment

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

Recent Posts

0

Your Cart