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

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

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

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

 

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 five 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