Custom Divi Header 03 – Free Download

Nelson Miller Pee Aye Creative
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.
Categories: Divi Freebies
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

Last updated [last-modified %date%]

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore 🙂

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

15 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?

  8. Nikhil

    Hey thanks for the nice header! But are there instructions on how to revert back to the stock header? I removed all the CSS from theme options, but the header’s still overlapping the hero image.

    Reply

Submit a Comment

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

Other Freebies

0

Your Cart