How to display social icons in Divi header on mobile

divi header

It’s been many versions since version 2, and we are almost on version 5, that the Divi theme doesn’t show the social icons in the secondary header on mobile devices, as you can see in the following screenshots…

Well, if you want your visitors with mobile devices to also see the social icons in the Divi secondary header simply add the following CSS in the WordPress customizer, specifically in AppearanceCustomizeAdditional CSS:

/* Social icons for divi mobile header  */
@media only screen and (max-width: 767px) {
div#et-secondary-menu { 
display: block !important; 
margin-top: 0px !important;
padding-top: .75em;
} 
#et-secondary-menu>div.et_duplicate_social_icons>ul>li a {
display: block;
padding-bottom: .75em;
}
}
@media only screen and (min-width: 768px) and (max-width: 980px) {
div#et-secondary-menu { 
display: block !important; 
padding-top: .75em; 
} 
}Code language: CSS (css)

Publish the changes and you will have the social icons in the Divi secondary header, also on mobile devices, as you can see in the following screenshot:

divi mobile header with social icons

How useful was this post?

Click on a smiley to rate it!

Average rating 5 / 5. Vote count: 4

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

As you found this post useful...

Follow us on social media!

About The Author

Leave a Comment

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

Scroll to Top
Skip to content