In this Divi 4.0 Theme Builder tutorial, I am going to show you how to design a Divi header, make it sticky and also make it look awesome on mobile devices.

Here is the code to make the header sticky

position: fixed;
top: 0;
left: 0;
right: 0;

Here is the code to make the menu modules stay in line.

display: flex;

Share the Article

Share on facebook
Share on Facebook
Share on twitter
Share on Twitter
Share on linkedin
Share on Linkdin
Share on pinterest
Share on Pinterest

Leave a comment

16 thoughts on “How to design a Divi header”

  1. Mak, thank you! An excellent video and tutorial, one of the best! I found the header code to make it sticky put my header too far up and the menu items disappeared. I left out the “top” setting and used:

    position: fixed;
    left: 0;
    right: 0;
    This worked perfectly!

  2. Hi Mak,

    Thank you for yours precious tips!

    But I have a problem. If I use the Theme Builder to make a global header as you said, the pages goes back the header, not like the regular header set up in the Theme customizer.

    How to fix that?

    Tks

      1. Maybe I didn’t explain so well.

        The header is overwriting the page itself. The top content from the page is hided behind the header.

        Can you help?

        Tks

          1. But it causes a big problem because I need to set a top margin to each page and for each device too…

            Kkkk! Hope you teach me to fix.

            Tks

          2. I have the same problem with this solution. It is very easy to solve at posts, because I can use a top margin at the theme builder custom body section and using a post content, but there is no solution at pages, because there is no page content modul in Divi.

  3. Mak, I have problem with Slider revolution. every slide that I making it looks different in the page. when I use Elementor It working well.

  4. Luis Hermenegildo

    Mak do you have a code to shrink the menu when scrolling ? Also what about making the logo overlap the menu border ? great good thank you

  5. Hey Mak, great fresh tutorial on this powerful update! I’ll be looking for more coming in the near future. Do you have css code to have your mega-menu dropdown be fullscreen by chance? Thanks in advance

  6. Pingback: Divi header design – Divi 4.0 theme builder tutorial | Nikkies Tutorials

  7. Hi Mak,

    Thanks for the wonderful article on creating a sticky global header using the new Divi 4.0. Interesting that we need to use CSS code to make the header “sticky.” I would have thought Elegant Themes would have added this capability as a “core” feature. Oh well…at least you showed us how to do it.

    Thanks again!

Leave a Comment

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

Scroll to Top