Changing the Divi Header Top Header Styles

Written by Dan Mossop

The Divi Theme allows you to set a phone number and email address to be shown at the top of the header, as well as a number of social media icons. Here's how to change the look of these top header text and icons.

Changing the Top Header Bar Font Size

You can adjust the font size of the icons with the following CSS:

#top-header #et-info-phone, 
#top-header #et-info-email, 
#top-header .et-social-icon a { 
    font-size:130% 
}

Note that the default font-size is 100% so anything bigger than this will increase the font size and anything smaller will decrease it.

Changing the Top Header Text and Icon Color / Hover Color

I've now moved (an improved version of) this tip into its own post:

Changing the secondary header text and icon hover colors

Changing the Top Header Bar Background Color

To change the background of the whole top header bar, you can use the following CSS:

#page-container #top-header { background-color: red !important; }

Enhance Your Divi Site with Dynamic Search Results

Bring instant, dynamic search results to your Divi pages with the Divi Search Results Module. This powerful module updates results live as users type, enhancing user engagement and streamlining the search experience on your site. Compatible with any input box for maximum flexibility.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

24 Comments

  1. To add to this post, if you add custom text to the header using the DiviBooster plugin, use this CSS to also change the color of this custom text :

    #top-header #et-info,
    #top-header #et-info-phone,
    #top-header #et-info-phone a,
    #top-header #et-info-email,
    #top-header .et-social-icon a {
    color: yellow !important;
    }

    Reply
    • Thanks Mathieu!

      Reply
  2. Thanks for this tip, it's saved me a lot of time trying to work this out.

    I do have one slight problem though. When viewing the site on a mobile device the social icons in the top bar disappear. I've tried the tips here

    https://divibooster.com/show-divi-header-social-icons-on-mobiles-divi-2-4/

    but they do not show.

    I'm curently running Divi 2.7.5.

    Do you have any suggestions on how to make them show?

    Thanks,
    Mark.

    Reply
    • Hey Mark, I've just checked on my test site and this code is working with Divi 2.7.5. Any chance you can provide a link to your site so that I can take a look?

      Reply
  3. Dan,

    There is a limit to the number of posts one can do on a thread … it gets to a point where a reply is not possible.

    This is related to the phone link changing on mobiles.

    You state the phone link looks fine on your Iphone.

    It looks like the devices I use apply some CSS that changes the link colour.

    I corrected this by applying the following custom CSS … the important element seems to be important ….

    #et-info-phone a {color: #fff !important;}

    Job done … now it is consistent on all devices I review on.

    Can you apply the important bit … I think that will do the job

    Thanks Mark

    Reply
    • Hey Mark,

      Thanks for sharing the details of your fix. I couldn't understand at first while I couldn't see the different link color, but now I realize that it isn't a link by default and your devices must be detecting it as a phone number and converting it to a clickable link.

      I've just updated the plugin to include your fix. Let me know if you have any trouble with it.

      Thanks as always!

      Reply
      • Dan,

        Great stuff. That is fixed. Phone number is behaving as desired.

        Thanks Mark

        Reply
  4. Hi Dan,
    Divi Booster enables you to control the text colour for phone and email style.
    I note that the social icons are also changed in colour … great .. makes sense.
    However, if you resize your browser … you will see that at the breaking point … the social icon colour reverts back to default … and does not keep its … Top Header > Phone & Email Style > Text Colour.
    Try it. Change the text colour … and resize the browser … get to the 767px breaking point and there you go.
    Can you fix that my good man … would be great.
    Many Thanks, Mark

    Reply
    • Dan,

      The breaking point is at 768px mark.

      The missing CSS which should be applied globally is …

      .et_nav_text_color_light .et-social-icon a {
      color: #fff;
      }

      Many Thanks

      Regards Mark

      Reply
      • Cool, thanks for sharing the code, Mark :)

        Reply
        • Thanks Dan,
          Your CSS is better than mine … i think there's a dark css element too.
          You best approach it from the base level.
          Thanks for being so prompt and on the ball.
          No reply required.
          Regards Mark

          Reply
          • Dan,
            Thanks for rectifying this in version 1.2.5.
            My tests indicate this is working nicely.

            However, I now note that on mobile devices only (not desktops, etc) that the actual telephone number itself is not picking up the colour style. It remains with the default.

            Please take a look … mobiles only … browser resize on desktop will not show it.

            Many Thanks, Mark

          • Cheers for the update, Mark. What device are you using? It is rendering correctly on my iPhone 4.

          • Dan,
            I couldn't add this post to the end … so I've done it here.

            On all my mobile devices the device seems to style the telephone number … off white … Iphone 4, Iphone 5 & Ipad.

            This CSS sorted it in CSS Manager:

            #et-info-phone a {color: #fff !important;}

            Thanks Mark

          • Mark, as mentioned in the reply to your other comment, I've updated the plugin to include your fix. Thanks!

    • Nice catch, Mark. I hadn't notice this, but Divi actual creates two separate copies of the social icons. The first shows on large screens and the second on mobiles (presumably there are layour reasons for ET doing this). My CSS was applying only to the former set of icons. I'll fix this and put out an update to the plugin and this post in the next day or so. Thanks!

      Reply
      • Hey Mark, I've now released the update to fix the icon color.

        Reply
  5. Can I control the position of the contact info by using "#et-info-phone" as well?

    Reply
  6. Is there a way to decrease default size of header? Make it shorter? Been successful increasing it but not other way. Also if we decide to add pictures before header can we also enter a slider with multiple images?

    Thanks

    Reply
    • Hey Chris, the header size is mainly dictated by the height of the logo, so you could try a smaller logo… There is also a little bit of padding above and below the logo, wich could be removed. I'll try and write up a tip on this at some point. Having a slider above the header seems to be a popular request so I'll definitely look into it in the future. I suspect it'll be a bit complicated to achieve so it may take me a little while to figure it out.

      Reply
  7. Hi there,

    Sorry if this is a silly question! I want to remove completely the top header. The space above the main header. How do I do this?

    Thanks!

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.