How to Add Text to Divi Top Header

Written by Dan Mossop

The Divi top header (also known as the secondary menu bar) allows you to add a phone number, an email address, and social media icons. But it doesn't yet allow you to add plain text. This post describes how to add text to your top header.

Here's how it will look:

Add Text to the Top Header using Divi Booster

Divi Booster includes an option for adding text to the top header, located at:

Divi > Divi Booster > Header > Top Header > Add text to top header

The option is available from Divi Booster v2.0.7 onwards.

Including HTML in the Top Header Text

As of Divi Booster 2.6.1, the setting now accepts HTML, so you can easily add clickable links and other elements to the top header. For example, if you want to add a link to the top header, you can put something like this into the setting:

Some <strong>bold text</strong>, <em>italic text</em> and <a href="https://www.mysite.com">a link</a>
And it will give the following result on the front-end:

Hide the Top Header Text on Mobile

You can hide the top header text on mobile by adding the following CSS to your site:

@media only screen and (max-width: 980px) {
    #db-info-text {
        display: none;
    }
}

Add Text to the Top Header using jQuery

To add plain text to the Divi Top header, add the following jQuery code to your site:

jQuery(function($){
    if (!$('#et-info').length) { 
         $('#top-header .container').prepend('<div id="et-info"></div>'); 
    }
    $('#et-info').prepend('<span style="margin:0 10px">Welcome to my website</span>');
});
Simply change the “Welcome to my website” text to that of your liking and you're done. Note though that if you wish to use a single apostrophe ('), you should precede it with a backslash (\) to avoid affecting the code.

Boost Your Divi Design with Divi Booster

Looking to add more features to your Divi site, like adding text to your top header? With Divi Booster, you can easily customize your site with hundreds of enhancements, including adding text to the top header from version 2.0.7 onwards. Upgrade your Divi site today!

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, 

62 Comments

  1. Did this move? It's not in the menu where described.

    Reply
    • Hey rocket ivy, it hasn't moved… you should be able to find it if you go to the WordPress dashboard and select "Divi > Divi Booster" from the sidebar menu. This will take you to the main Divi Booster settings page. Next, click on the grey "Header" toggle and then the green "Top Header" sub-toggle. That should bring up the top header options, one of which is called "Add text to top header" – that being the one you're looking for. Hopefully you can see it there, but if not, perhaps I'd be able to login and take a look for myself to make sure it hasn't gone missing for you?

      Note: I have just updated the image of the setting in the post above to reflect the fact that I've now removed the bit of text in parenthesis that used to follow the setting name – perhaps that might have been throwing you off?

      I hope that helps!

      Reply
  2. Can't seem to add padding to the text element to align it a bit better. I'm using the #db-info-text div. Any idea why adding a padding css attribute isn't working?

    Reply
    • To clarify,I'm talking about a padding-top attribute.

      Reply
      • Hi Tom, I think this is because the text is vertically aligned to the baseline. This means the vertical position of the text is dictated by the bottom of the actual characters in the text, not the padding. The top padding will be getting added above the text (and have no visible effect unless you were to set a background color or similar).

        An easier way to push the text around is to do this:

        #db-info-text {
            position: relative;
            top: 2px;
        }
        

        This will move the text down by 2px. To move it up use, for example, -2px. Hope it helps.

        Reply
  3. Dan, is there any way to have the text and link appear on the right hand side?

    I would like to put a "My Account" link next to the WooCommerce Shopping Cart Icon.

    Reply
    • Hey Kevin, there's a way to do what you want without custom code. From the main WP menu go to "Appearance > Menus" and create a new menu. You can then add a "Custom Link" menu item in which you can put your text / link. Then under "Menu Settings > Display Location" select "Secondary Menu" and save. This will create a menu with your link in the right hand side of the top header. Let me know if those steps aren't clear. Thanks!

      Reply
  4. This is not working, just bought the plugin and it's not working in my browsers and mobile.

    Reply
    • Hi Bertus, is there any chance you're able to share a link to the site you're working on (either here, or via the contact form), so that I can take a look at what's going wrong? Thanks!

      Reply
  5. Actually, neither of these options work.

    Reply
    • Hey Tj, I just took a look at the site linked in your comment and can see an address added to the top header text (by the Divi Booster feature), so I take it you were able to get it working? If you still can't see it, I'd suggest clearing your browser cache to see if that helps – it may be that your browser is storing an old version of the page from before the top header text was added. If you're still having problems after that, let me know. Cheers!

      Reply
  6. This feature is not working. I put in my text, hit save, and nothing appears on the site.

    Reply
    • Hey Tj, I just took a look at the site linked in your comment and can see an address added to the top header text (by the Divi Booster feature), so I take it you were able to get it working? If you still can't see it, I'd suggest clearing your browser cache to see if that helps – it may be that your browser is storing an old version of the page from before the top header text was added. If you're still having problems after that, let me know. Cheers!

      Reply
  7. Hi Dan. I love your plugin! I just bought it for this. My question is the text doesn't show up on mobile, correct? Is that by design or is there a way to make it show on tablets and mobile? Or does that just make it too crowded on mobile and tablets? Thanks

    Reply
    • Hey Kevin, it should show up on mobiles as well (as long as the #et-info element isn't being hidden). Are you able to share a link to the site so that I can take a look at what's going on? Cheers!

      Reply
      • Hi Dan. Did the text show up for you on mobile? I can get it to show up on another website I am working on but not this one. Is the text too long? I don't see where #et-info is hidden on mobile.

        Reply
        • Hey Kevin, sorry I'm just getting to it now. I think the problem on this site is that your secondary header itself is normally hidden on mobile (i.e. #top-header) since none of the built-in Divi elements are shown on mobile in your current set up. While my code adds the text to the top header it doesn't control the visibility of the top header itself (though probably should). I'll look into this some more, but I was able to come up with this CSS to display the secondary header which seems to work quite well on your site:

          @media (max-width: 980px) {
              #top-header {
                  display: block !important;
                  position: relative !important;
              }
              #main-header {
                  position: relative !important; 
              }
              #page-container {
                  padding-top: 0px !important; 
                  margin-top: -5px;
              }
          }
          

          I hope it helps!

          Reply
          • Hi Dan. Thanks a lot! It works perfect!

  8. Hey Dan,

    can you please tell me if there is a way to add image to the top header (logo)?

    Thanks

    Reply
    • I've managed to do it with HTML Images Syntax.

      Thanks anyway

      Reply
      • Okay, great! Thanks for letting me know, Boris :)

        Reply
  9. Where the email address is in the top header bar, i want to replace that with a link to a url.

    Reply
    • Hey Scott, I've just released an update to Divi Booster (v2.6.1) which lets you add HTML to the top header. On the Divi Booster settings page, go to "Header > Top Header > Add text to top header" and enter something link:

      Please visit <a href="https://www.mysite.com">My Site</a>

      Save the settings and then go to your site and you should see the clickable URL in the top header.

      You can get rid of the unneeded email address field by going to "Divi > Theme Customizer > Header & Navigation > Header Elements" and deleting the contents of the email address field.

      Hope that helps!

      Reply
  10. Hi! Is there any way to make part of this text hyperlinkable?

    Reply
    • Hey Natalie, I'll have an update out in the next few days (v2.6.1) which lets you add HTML into the text, so you'll be able to add links, etc. Hope that helps!

      Reply
      • Thank you so much Dan! This works perfectly!

        Reply
  11. Tx very useful and works on Extra theme :)
    By the way thanks for your extrabooster site, it helped us a lot, nice tricks !
    keep adding some, it's always awesome ;)
    Tx !

    Reply
    • You're very welcome, Nathalie. I will do :)

      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.