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
Click to rate this post!
[Total: 0 Average: 0]

Leave a Comment

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

Scroll to Top Skip to content