Beautiful Divi Header Modifications

Beautiful Divi Header Modifications

Here’s a cool header you can build in about 20 minutes, that looks absolutely nothing like default Divi. All of the changes are made in CSS which keeps things mega simple. Here’s what you need to do…

Catch the full tutorial on our new Divi Site

 

Get our best blogs & free stuff straight to your inbox. Join our mailing list now.

Get in! You're all signed up for our next newsletter.

20 Comments

  1. Hi Steve
    Just came over from the Divi Facebook group.
    What a superstar you are – content like this is much appreciated.

    Reply
    • Stephen

      Thank you Keith, really appreciate that! I’ll try and do more write ups in the future :)

      Reply
    • Great header! Is there a site implementing it or a demo ?
      Thanks

      Reply
    • Stephen

      No worries Paulo :)

      Reply
    • Stephen

      Thanks for reading Catherine :)

      Reply
  2. Thanks a million, this is really cool. How did you get the font icons?

    Reply
    • Stephen

      Thanks very much :) Check out the section on adding font icons ^^

      I’ve used Font Awesome in this example.

      Reply
  3. Thanks for your efforts here.
    Nice to note as well, from a user-training (>>Client Training :) ), that the hovering-on-logo transition reinforces and illustrates the fact that most masthead logos ARE the freaking home button, by default.

    That effort on which you’ve ‘tooted’ can once and for all quiet the client that says ‘But where’s my home link?’ LOL

    Again Steve (Stephen?), thanks.

    — Michael

    Reply
  4. Hey!

    This is a great tutorial and I think it looks great by the end of it. My only real comment in terms of what I would have done differently is the page id CSS.

    This assumes you only have a few top level links. You do not want to add new CSS for every new page you create. If you have top level pages and child pages then I would use a PHP query in the header to echo CSS according to the page tree parent. This way you can colour whole sections of your website according to the parent page.

    Although you would have to add to this solution for every parent it is still much less than changing the CSS and including every page ID which could get lengthy.

    Either way, Great tutorial and I will be sure to use what you have shown with a few modifications for my use.

    Ben

    Reply
  5. Really lovely ideas & articles. I’ve bookmarked your site & will pass it on!

    Reply
    • Stephen

      Thank you Lindsay :)

      Reply
  6. Thank you so much for this! Not only was this a good learning experience, it has already helped to spruce up my site. I truly appreciate it. :-)

    I might want to disable the social-menu items on mobile/hamburger menu. Any tips on accomplishing that would be more than welcome.

    Cheers!

    Reply
    • Stephen

      Sure Dan, you could hide the social-menu class on devices that use the mobile menu like:

      @media only screen and ( max-width: 980px ) {
      .social-menu {
      display: none;
      }
      }

      Glad you like the tutorial :)

      Reply
  7. Hey Stephen,

    Great effect, and nice tutorial! I was wondering if there is a way to style the social icons’ color separately from the nav menu text. As it stands, they inherit the font color from that assigned in the Divi “Customize Header & Navigation” menu. I’ve attempted to add, to no avail, this evil CSS to my child:

    .social-menu {color: #666666 !important;}

    Reply
  8. Hi Stephen,

    Love the idea of this post but no matter what I do I cannot get the transition to work in Divi Theme Version 2.4.6.4. I am putting the CSS into a Blank Child Theme. The logo & transparent I am using are sized 212 × 87. The home icon is 64. I have tried trouble-shoot but can’t see the problem.

    Any advice you could offer would be greatly appreciated.

    Thanks

    Pat

    Reply
  9. Hi Stephen,

    Got that working! Was my own fault – had miss-placed the CSS in the file. This is a wonderful tutorial. Thanks for all the fantastic posts and info. Looking forward to reading more.

    Pat

    Reply
  10. Hi Stephen
    I just found your site link on facebook group, what you have achived is amazing .
    A great work
    Thanks for sharing such information with us.
    Looking forward to see more

    Reply
  11. Hi Stephen,
    Found this page on the Divi Facebook. Great tutorial. Well done.

    Reply

Leave a Reply to Ben Cancel reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>