Custom Divi Header 03 – Free Download

Nelson Miller Profile Orange
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
Categories: Divi Freebies

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
Divi Logo (2)

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Featured Products

Asset 4

New! Trail Guides

Follow a series of blog posts carefully arranged around a specific topic or goal! Keep track of your progress by marking posts completed, just like a free course!

View Trial Guides

Divi Trail Committee Membership badge with map design

Join The Trail Committee!

Show support for our ongoing work creating community resources at Pee-Aye Creative and enjoy exclusive member perks in return.

Learn More

Divi Tutorials On YouTube

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

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

15 Comments

Comments By Others

  1. 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
  2. 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) <span class="comment-author-role-label author-label">Author</span>

      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?

  3. 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) <span class="comment-author-role-label author-label">Author</span>

      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
  4. 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
  5. Lucas

    HI

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

    Reply
  6. 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
  7. 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) <span class="comment-author-role-label author-label">Author</span>

      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
  8. Nick

    Beauty!

    Reply

Submit a Comment

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

Other Freebies

0

Your Cart