How to add text and HTML to Divi’s submenu

divi header

Don’t you think that the top header of Divi’s secondary menu is wasted? By default there are really few elements you can add … there is so much wasted space!

divi secondary menu default

Wouldn’t you like to add some text, call to action or something?

Well, you have 2 ways to do it: one free and one very cheap.

Add elements to Divi’s top header with a plugin

If you do not want to complicate and you are one of those who like to activate things with a click you have this jewel called Divi Booster that serves for this and much more.

You just have to install and activate the plugin to implement its full potential.

Specifically, to add text to the top header of Divi simply see its configuration page in DiviDivi BoosterHeader Top HeaderAdd text to top header, check the box and put the text or HTML you want.

Divi booster settings to add text to the secondary menu

This text you add will be displayed before the phone and other items in the secondary menu of the top header of Divi.

example of Divi booster text

The great thing about this method is that it allows you to use HTML in the text box, even adding links.

For example, you can add something like this:

Don't miss on <a href="/discounts"><strong>today sales</strong></a> with a <strong><em>25% discount</e></strong>Code language: HTML, XML (xml)

It will look great, with the functional link, everything to your liking…

Example of Divi booster text with links and css

Add elements to Divi’s top header with a code

You’d rather not spend a bit on Divi Booster and do it on your own? No problem!

Go to your website administration and access the Divi menuTheme OptionsIntegration.

Activate the header code and add the following:

if (!$('#et-info').length) { 
$('#top-header .container').prepend('<div id="et-info"></div>'); 
$('#et-info').prepend('<span style="margin:0 10px">My text example</span>');
</script>Code language: HTML, XML (xml)

Like this, as in this capture:

Divi integration of text through header code

Save the changes and that’s it, you will get the same result as with the plugin.

Now you can take advantage of all that wasted space in the secondary menu of Divi.

How useful was this post?

Click on a smiley to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

As you found this post useful...

Follow us on social media!

Leave a Comment

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

Scroll to Top