Custom Divi Header 03 – Free Download

In this post, I'm giving away our third free custom Divi header layout and CSS. Use this creative design to customize the Divi header on your website.
custom Divi header
custom divi header

Key Features

NOTE: Uses the Default Divi Header!

  • Unique Open Menu
  • Two Buttons Side By Side in Column
  • Play Icon with Hover Effects
  • Designated Column Stacking Order on Mobile
  • Menu CTA Button
  • Custom Slide-Out Mobile Menu

I spend a lot of time developing these FREE Divi resources. However, all I ask in return is that you subscribe to the blog. You won’t get spammed daily like some sites do (eh hem), but I will share helpful new tutorials and products once in a while when they come out.

NOTE: If you already subscribed for these before, no worries. You won’t have to confirm this time, just enter your info and the download link will appear.

13

Please share this Divi freebie!

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.

View More Divi Freebies

Leave A Response!

13 Comments

  1. Nick

    Beauty!

    Reply
  2. Richard

    Love this thank you, it makes the menu a lot better. I want to make the burger bar menu kick in earlier as I have lots of menu items. Not sure which bit of the code to change. I tried this but doesn’t work properly. Thank you once again.

    @media (max-width: 1200px) {
    nav#top-menu-nav {
    display: none !important;
    }
    }

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Richard, you would want to try something like this:

      /* initiate mobile menu sooner than 980px */
      @media only screen and (min-width : 981px) and (max-width : 1200px) {
      #et_mobile_nav_menu {
      display:block;
      margin-bottom:10px;
      margin-top:5px }
      #top-menu-nav {
      display:none;
      }
      }

      Reply
  3. Lucas

    Hi

    When I try to install the customizer settings I get an error saying i can only upload a json file and the file is css

    Reply
  4. Lucas

    HI

    I couldn’t upload the customizer settings because it’s in css format and to upload only JSON file is required.

    Reply
  5. Lucas

    Hi Nelson

    Thank you for assisting me and providing us with cool divi layouts and tricks. However on this header I can’t seem to find a way to edit the button on the header, could you please assist me. Thank you.

    Reply
  6. Zhainar

    Hi Nelson!

    Thank you for sharing this amazing Header:)
    Everything works very well.

    Only thing I would like to ask your help is about video link in play button. I have a video on youtube that I linked to a play button and it’s opens youtube page or youtube page in new tab.

    How can I make my video open in my website page like in the example provided below?

    https://www.evolution.life/

    I would really appreciate your help!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Zhainar,
      Thank you for the compliments, glad you like it! To answer your questions, I would suggest a popup plugin that opens the video in a lightbox. I don’t know one off hand to recommend, but I’m sure there are good options out there.

      Reply
  7. Trevor

    Loving your work 🙂
    2 questions if you can help? on my site …

    1) The last menu item is styled with the rounded corner border (which i love) … how can i add another link after this? I want the rounded corner link to be called ‘MENUS’ and the next link to be called CONTACT? any thoughts

    2) Currently, my site is showing the shopping cart icon at the end of the menu? i can’t seem to hide it? any ideas?

    TIA

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      Hi Trevor, so glad you love our site!

      1) You can change the “#top-menu li:last-child a” in the code to something like “#top-menu .button” in the CSS and then in your menu add a CSS class called “button” to the link you want to be a button.

      2) Sure, just add .et-cart-info span {display: none;} to your Divi>Theme Options>Custom CSS box.

      Reply
      • Trevor

        Thanks.
        Managed to fix point 2 but still can’t work out where the to edit ‘lastchild’ or where/how to add a class to the menu option to get my menu right?

Submit a Comment

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

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Pin It on Pinterest

0

Your Cart