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
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>
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;
}
}Related Post: Adding CSS to the Divi Theme
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>');
});Related Post: Adding JavaScript / jQuery to Divi.
Hello Dan,
at the moment the plain text is on the right site but unfortunately after the custom links. how can I remove the plain text to the first place?
Here is an example: NOW: Facebook, Email, CONTACT US:
Should be: CONTACT US: Facebook, Email
Thank you & best
Hi Inna,
Assuming you're working on the blackhatcoffee.de site linked in your comment, I think this variant should work for you:
jQuery(function($){ $('#et-secondary-menu').prepend('Contact Us:'); });The reason for the difference is that your facebook / email links are being added as menu items, rather than using Divi's customizer options. The code above takes that into account.
Hi,
Thank you. It is very helpfull. I want the shop icon with the text webshop. How do I get the icon in this line?
Kind regards,
Angelique
Hi,
I got the icon in line, but it is not visible at the homepage. At all pages it is, except at the homepage. Someone an idea who come?
Kind regards,
Angelique
Hi Angelique, as far as I can tell, the problem is that the font awesome plugin you're using to add the icon isn't loading on the homepage. Its CSS / font file aren't being loaded on the homepage, which is why the cart icon isn't being displayed. I'm not familiar with the plugin, but I'd suggest first checking its settings to see if there are any settings that might disable it from running on the homepage. If not, then your best bet would probably be to contact the plugin authors to see if they can advise you on how to get it to apply on the homepage.
If you aren't able to get an answer from them, let me know and I'll try to help out.
Hi Dan –
This worked perfectly for me, but I had a question.
I have the phone number floated right – is there a way to get this text I am adding to float left?
Thanks!
Hi Joe, something like this might work for you:
#et-info>span:first-of-type { position: absolute; left:0; }If not, any chance you can send me a link so that I can see exactly how your top header is set up?
Can the text be made into a link?
Sure, you should just need to change the line that actually adds the text to something like this:
$('#et-info').prepend('<span style="margin:0 10px"><a href="http://mysite.com">Welcome to my website</a></span>');Just replace http://mysite.com with your URL of choice.
Hi Dan,
I am new to this, but where would I edit this line?
Hi Adrian, this is a modification to the code given in the post. If you look at that code you'll see a line that begins "$('#et-info').prepend". You just need to replace that entire line with the one given in my comment. Hope that makes sense!
It would be great to have the option to include a link in the dialog box in Divi Booster rather than having to do it via Javascript.
Hi Maggie, I'm with you on that. I'm hoping to add it as an option in a future version :)
Hi Dan,
Can you please advise in which php file of the theme to search for the code that begins with “$(‘#et-info’).prepend”?
Hi Mila, you don't need to search the theme's PHP files for that line. The line of code that needs to be modified is the 5th line of the jQuery code given in the post above (in the "Adding Text to the Top Header using jQuery" section).
If I use this to put my tagline in the top header, is there a way to add a superscript TM after it?
Hi Penny, you can use the HTML code for the trademark symbol: ™
In the above example, you'd place it right after the word "website", and before "</span>".
Is there anyway to get this to work without having anything else in the top bar? Currently you have to either add the phone/email, or add the secondary menu. I don't want any of that. All I want is the text I had through the Divi Booster.
Hi Jon, at the moment this code needs the secondary bar to be visible to work. There are a couple of ways to get the secondary bar showing without having anything else in it:
1. If you don't intend to use social icons in the footer, you can enable the option to "Show Social Icons" in the customizer, but then disable each of the individual social icons in the Theme Options.
2. Put some value in as the phone number (so that it shows and activates the secondary header), then hide the phone number with this CSS:
#et-info-phone { display: none; }I'll try to update the code in the future to remove the need to do this.
Thanks for this.
I've enabled this feature using Divi Booster, however, the text appears on the left hand side of the top bar.
Is there a way to easily centre it?
See current layout on the website here: http://kesnet.co.uk
You're welcome, Paul. I think this should do the trick:
#et-info { position: relative; left: 50%; transform: translate(-50%, 0%); }Thanks Dan!
That worked perfectly.
Where does this line go? Sorry so confused.
Hey Scott, sorry I'm just getting to this. This is CSS code, so the easiest place to put it is in "Divi > Theme Options > General > Custom CSS".
This post gives some other options:
https://divibooster.com/adding-css-to-the-divi-theme/
thanks mate its working divi 3
This does not work on divi 2.7.8
Hi Peter, I just tested it on my own Divi 2.7.8 installation and it is working correctly for me. Are you able to share a link to your site? Hopefully I can spot what's causing it to fail for you.
Strangely it is already shown on the divi main preview.. http://www.elegantthemes.com/preview/Divi/
Just wish they would tell us how to implement it :(
Hey Paul, are you talking about the Shop / My Account / Checkout links? If so, they'll have done this by creating a standard WP menu (Appearance > Menus), and setting the Theme Location for the menu as "Secondary Menu". This will let you have a menu similar to the main Divi menu, though I don't think it will directly allow you to add plain text.
Hello,
This is a good feature.
However, It would be very good if you could add more than only test.
Like widget (search for exemple), images, tags (like post title)
Regards
David
Hi David, yeah these would be good to be able to do. I'll look into adding information on how to do this in the future.
Using Divi Booster. This doesn't seem to work, if there's no phone or email. I personally don't like that the email only works for mailto: links and want it to link to the contact page instead. So in most cases I just create my own phone and email links as menu items. I'd like to display a message up there on a project I'm currently working on, but have no use for the phone and email links. Yet without them, I can't display this message. Is there a way to add it without displaying those?
Hi Tevya, yes it looks like it was a bug in my code. I've just released an update to Divi Booster (v2.1.8) to fix this. If you upgrade you should be able to display the text without needing the phone / email to be showing. I've similarly updated the code in the post above. Thanks!