How to Add Text to Divi Top Header

This post may contain referral links which may earn a commission for this site

How to Add Text to Divi Top Header

Here's how to add a line of text to the Divi top header.

The Divi Theme's top header 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 do it. Here's how it will look:

Adding 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.

Adding Text (and Links) to the Top Header using Divi Booster

The option to add text to the Divi top header is available in Divi Booster from version 2.0.7 onwards. You’ll find the setting for it under “Header > Top Header > Add text to top header (on left-hand side)”.

If you want to show only the text / HTML, you can delete the phone number / email address in “Divi > Theme Customizer > Header & Navigation > Header Elements”. Make sure you don’t leave any spaces in the boxes or the icons will still show up.

As of Divi Booster 2.6.1, this 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:

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

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

60 Comments

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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!

  7. 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
  8. 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
  9. 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
  10. 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

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

Hundreds of new features for Divi
in one easy-to-use plugin

60 Comments

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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!

  7. 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
  8. 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
  9. 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
  10. 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

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