Lets add some extra text to the top header in DIVI. DIVI allows you add the phone number and Email using the theme customizer options in the top header.  The Top header in DIVI is the one which sits above the primary menu bar. The secondary menu also shows up inside the top header. The image below shows the primary menu, secondary menu and the top header.

There is also an option for displaying your social media icons in the customizer. When the option to Show social media is checked in the header element in the DIVI Theme Customizer, the social icons also get displayed on the top header too.

Secondary Menu and Primary Menu in DIVI

Primary and Secondary Menu in DIVI

 

Prepend Text to the Top Header using jQuery

For this example I am going to add “Best DIVI Freelancer for your website!”. To do this we have to add a little bit of jQuery.

To add the jQuery, go to DIVI- Theme Options – Integration Tab and look for “Add code to the < head > of your blog” as shown below. Add the following jQuery in that box.

Add jQuery to Integration Tab DIVI

Add jQuery to Integration Tab DIVI

 

<script type=”text/javascript”>
jQuery(function($){
if (!$(‘#et-info’).length) {
$(‘#top-header .container’).prepend(‘<div id=”et-info”></div>’);
}
$(‘#et-info’).prepend(‘<span style=”margin:0 10px”>Best DIVI Freelancer for your website!</span>’);
});
</script>

This will show your extra text on the top header, before the phone number as shown below.

Extra text - Top Header Divi

Extra text – Top Header Divi

 

Lets Make this Text Clickable

Sometime you want the text to be clickable, if you were linking it to another page like a contact page. If you want to make the new text that you added Clickable then add the following jQuery. This will create an anchor link for your new extra text.

<script type=”text/javascript”>
jQuery(function($){
if (!$(‘#et-info’).length) {
$(‘#top-header .container’).prepend(‘<div id=”et-info”></div>’);
}
$(‘#et-info’).prepend(‘<span style=”margin:0 10px”><a href=”https://wpportfolio.com/contact-divi-freelancer/> Best DIVI Freelancer for your website! </a></span>’);
});</script>

 

I hope this is helpful and you get a chance to use it on your site. Do leave me a comment if you use this tip on your DIVI website. For more such tips on WordPress and DIVI, check out my DIVI Blog.

 

0 Comments

Submit a Comment

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

I would love to hear about how I can help you with your business website. I have a Masters in Computer Science from Pace University, New York. Having worked in the software industry for many years, I am now freelancing and have specialized in using the DIVI theme from Elegant Themes, since the past eight years. Do have a look at my portfolio to view my other completed projects. Feel free to contact me and I will get back to you immediately.

Share This