In this post, we will see how to add a background image to the DIVI secondary menu area also know as the top header. You can change the colors of the DIVI Secondary Menu using the Theme Customizer Options, but cannot add an image as a background using the Theme Customizer.

Settings in the DIVI THEME CUSTOMIZER

Before I change the background to an image, my background for the secondary menu was set to a black color.  This was set in the DIVI Customizer by going to
DIVI –> Theme Customizer –-> Header & Navigation –-> Secondary Menu Bar –> BACKGROUND COLOR

I have chosen a color of Orange for the text color. This can be selected by navigating to
DIVI –> Theme Customizer –-> Header & Navigation –-> Secondary Menu Bar –> TEXT COLOR

This is what my the top header/secondary menu looks like with the black background and orange text setting for the secondary menu.

Background Color Secondary Menu – DIVI

Things To Do Before You Add the CSS

Choose the color for your text, so that it contrasts well with the background image that you are going to be using. Use a dark color text if the background image is light in color. I have chosen orange as my text color for this example. Make sure you adjust the colors for the social icons to match your background image.

The social icons color cannot be changed from the DIVI Theme Customizer. You can check out my post : Change the color for email, phone and social media icons in DIVI to change the color of the social icons with a few lines of CSS.

Next, make sure you upload the image you want for your background in your media library. I have used an attribution free picture from the site pixabay. I have also sized the image to a 1920px by 108px using Photoshop. 

Once the image is uploaded to the media library, find the URL of the image. You will need that in the CSS that we write. 

My background image looks like this

Secondary Menu Background Image

The URL was https://wpportfolio.com/wp-content/uploads/2019/10/secondarymenu-background.jpg

CSS to add Background Image on DIVI Secondary Menu

To add the CSS, head over to your style.css in your child theme and paste the following CSS.
Alternatively you can also go to DIVI -> Theme Options and paste the CSS in the Custom CSS box.

/* CSS to Add Background Image to the DIVI Secondary Menu */
#top-header{
background:url(https://wpportfolio.com/wp-content/uploads/2019/10/secondarymenu-background.jpg)
no-repeat center;
background-size: cover;
}

Make sure you replace the background URL to the url of your image.

Here is what the Secondary menu looks like after applying the above CSS.

Secondary Menu with Background Image – DIVI

I hope you like this tip and if you do use it on your website, do leave me a comment. For more DIVI TIPS and TRICKS make sure you visit my DIVI BLOG.
If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.

Picture courtesy – Pixabay.
Image used for background.: https://pixabay.com/illustrations/banner-header-logo-header-1631295/

Related Posts –

• Background Image on your DIVI Mobile Menu
• Add Background Image to the DIVI Footer/Bottom Bar
• Background Image on the DIVI Primary Menu/Main Header

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.

The secondary menu / top header stays fixed on the scroll in DIVI. However, there might be times you want to hide it on scroll so that there is a little more real estate on the website. In this tutorial we will use CSS to hide the top header on scroll. This tip will apply only to desktop devices, as by default, the secondary menu will not be fixed on mobiles.

The top header will be visible only if you have an email or phone number or social icons enabled in the DIVI Theme customizer. If you have none of those then, by default you will not see the top header. The top header will also be visible if you have assigned a menu as a “Secondary Menu” in the Appearance –> Menus area of your theme as shown below.

Secondary Menu Assigned in DIVI

Secondary Menu / Top Header in DIVI

CSS to Hide the Top Header on Scroll

/* Hide top header – secondary menu on scroll */
#top-header {
overflow:hidden;
max-height:50px;
transition:max-height .3s ease;
}
#top-header.et-fixed-header {
max-height:0;
}
#main-header {
transition:top .3s ease;
}
#main-header.et-fixed-header {
top:0!important;
}
.admin-bar #main-header.et-fixed-header {
top:32px!important;
}

Explanation: The #top-header will target the secondary menu bar and set the height to 0. The #main-header will target the primary menu bar. The last piece of CSS will target the primary menu when you are logged in to your wordpress dashboard (hence the .admin-bar).

Now when you scroll on the desktop you will only see the primary menu and the top header will be hidden as shown below.

Hide Top Header on Scroll in DIVI

I hope this CSS helps you in customizing your DIVI site. If you do use it on your site, do leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog. 

Related Posts –

• How to align the DIVI Secondary Menu to left or center

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.

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.

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

[sourcecode language=”javascript”]
<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>
[/sourcecode]

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

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.

[sourcecode language=”javascript”]
<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>
[/sourcecode]

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.

Related Posts – 

• How to Align the DIVI Secondary Menu to Left or Center
• Turn Header Phone Number into Clickable Link in DIVI

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.