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.

Do you want to display the social media icons on the mobile?. By default when you add social media icons and display it on the top header, it will not be displayed on the mobile.

There is no option in DIVI to display social icons on mobile. But we can add a few lines of CSS and display the social icons on mobile also. This is helpful for quick access to social media on your mobile as most people use mobile devices these days. 

Social icons on desktop – DIVI

When you view your website on a mobile device, the social icons will not show by default as shown below. 

No social icons on mobile – DIVI

Display Social Icons on Mobile using CSS

Let’s add some CSS to force the DIVI theme to show the social icons. To do this 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.

@media only screen and (max-width: 768px) {
div#et-secondary-menu {
display: block !important;
margin-top: 5px !important;
}
#et-secondary-menu>div.et_duplicate_social_icons>ul>li a {
display: block;
padding-bottom: .50em;
}
}

Now the social icons will show on the mobile. Make sure you adjust the padding-bottom in the CSS. Make it bigger if you want more space below the social icons. Also if you want to display the icons on tablet also, increase the max-width: 768px to a higher value like max-width: 992px.

Social icons displayed on mobile – DIVI

I hope this tip has been helpful to you and if you do use it on your DIVI website, do leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog. 

Related Posts –

• Add Extra Text on your DIVI Top Header Before the Phone Number
• Turn Header Phone Number into Clickable Link in DIVI
• Change the Color for Email, Phone and Social Media Icons 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.

In this post we will learn how to change the color for the email and phone number in DIVI. We will also change the color of the social media icons like Facebook, Twitter etc. This is useful when you want to match the icons to the branding colors of your website.

By default the icon for email, phone and social media will have the same color that you set for the text color in the secondary menu options. These text colors are set by going to the DIVI – Theme Customizer – Header and Navigation – Secondary Menu Bar – Text Color.

Color of email and social icons – DIVI

Changing the Color of the Email, Phone and Social Icons with CSS

To do this 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.

Add the following lines of code. I have added CSS to change colors for the phone and email icons. Also for the social media I have included the CSS to change Facebook, Twitter and Google Plus Icons.

/* Top header email, phone and social media icon colors */
#top-header #et-info-phone:before { color: blue!important;}
#top-header #et-info-email:before { color: blue!important;}
#top-header .et-social-facebook a.icon:before {color: blue!important; }
#top-header .et-social-twitter a.icon:before {color: blue!important; }
#top-header .et-social-google-plus a.icon:before {color: blue!important; }

I am setting it here to blue only as an example. You can always include a hex color code in the css code. Here is what it looks like after your CSS has been applied.

Change color of email, phone and social icons

I hope this tips helps you in changing the colors of your icons if you need to. There are somethings for which you have to use CSS to change things in DIVI. The more you keep learning simple tips like this, the more you will get the hang of it and soon you will be able to inspect elements in the browser and write your own CSS. For more such tips on WordPress and DIVI, check out my DIVI Blog.

Related Posts – 

• Add Extra Text on your DIVI Top Header Before the Phone Number
• Turn Header Phone Number into Clickable Link in DIVI
• 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.

When you add a phone number and email in your DIVI Theme Customizer, the email is clickable but the phone number is not. Let’s make the phone number clickable. This is a great feature to have when your user is on the mobile and wants to call you with a single click.

To add a phone number and email you would go to DIVI –> Theme Customizer –> Header & Navigation –> Header Elements and add the phone number as shown below.

Phone Number and Email in DIVI Theme Customizer

By default this phone number is not clickable. The good thing is that we can actually add HTML in the phone number box and make it an anchor link so it will become clickable.

Replace your phone number by an anchor link by placing the following HTML in the phone number field as shown below. Make sure you change the phone number to the desired phone number.

<a href=”tel:1-650-123-1234″ rel=”nofollow”>(650)-123-1234</a>

Phone Number as a clickable link in DIVI

Highlight the Clickable Phone Number on Mouse Hover

When you inspect the CSS on the other elements in the header like email or Social icons, you will notice that they all change the opacity on hover. The phone number field does not change the opacity on hover but we can target it with CSS easily.

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

/* Change Opacity when you hover over the clickable phone number in DIVI */
#et-info-phone:hover {
opacity: 0.7;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
} ease-in-out;
}

I hope this tip helps you in making your phone number clickable. You can also put the HTML for phone number anywhere in your website to make the number clickable. For more such tips on WordPress and DIVI, check out my DIVI Blog. 

Related Posts –

• Align the Secondary Menu on the Top Header to Left or Center
• Change the Color for Email, Phone and Social Media Icons 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.