In this quick tip we will learn how to open the DIVI social icons in a new window/tab. By default the social icons will open on the same browser page, and that will take away the user from your website. To prevent that we will add a little bit of jQuery in DIVI to make sure that our social icons open in a new tab.

Social Icons are found in two places, depending on what options you choose in DIVI. 

Which Social Icons will Show Up?

This depends on which social icons you choose in your DIVI Theme Options. as shown below. To select which social icons show up, navigate to your DIVI –> Theme Options  –> General Tab and pick the social icons you want to display. 

Which Social Icons to Display – DIVI

Where to Display the Social Icons?

There are two locations you can choose to display your social icons: The Secondary Menu/Top Header or Bottom Bar/Footer.

Display Social Icons on Secondary Menu/Top Header

To display social icons on your Secondary Menu/Top Header, make sure you have the “SHOW SOCIAL ICONS” checked in your Header elements. You can do this by navigating to 

DIVI –> Theme Customizer –-> Header & Navigation –-> Header Elements –> SHOW SOCIAL ICONS

Display Social Icons on Secondary Menu – DIVI

Display Social icons on DIVI Bottom Bar/Footer

To display social icons on your Bottom Bar in your footer, make sure you have the “SHOW SOCIAL ICONS” checked in your Footer elements. You can do this by navigating to 

DIVI – Theme Customizer – > Footer –> Footer Elements –> SHOW SOCIAL ICONS

Display Social Icons on Bottom Bar – DIVI

Open Social Icons in a New Tab using 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 Open Social Icons in New Tab – DIVI

<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(“.et-social-icon a”).attr(‘target’, ‘_blank’);
});
</script>

Save your changes. This will open your social icons – both on secondary menu and footer in a new tab. 

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.  If you like to hire me for designing or editing your DIVI website, send me a message on my contact page.

Related Posts – 

• Show Social Media Icons on Mobile in DIVI
• Remove Social Icons from Bottom Bar/Footer on Mobile 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.

Let’s remove the social icons from DIVIs footer/bottom bar only for mobile using CSS. There are many option you can have for your social icons in the footer. You can enable or disable it on both desktop and mobile, or using this tutorial you can enable it on desktop but hide it on mobile.

Show Social Icons on Desktop and Mobile

For the desktop, there is an option in the DIVI – Theme Customizer – > Footer –> Footer Elements –> “SHOW SOCIAL ICONS” that you can check (or uncheck) to enable or disable it. Checking the option “SHOW SOCIAL ICONS”  will enable it on the desktop and mobile as shown below.

Social Icons enabled in DIVI

Social Icons enabled – DIVI – Mobile

Remove Social Icons from Desktop and Mobile

To remove the social icons from both desktop and mobile, make sure you uncheck the “SHOW SOCIAL ICONS” box in the DIVI Theme customizer as shown below.

Social icons disabled on desktop and mobile

Keep Social Icons on Desktop and Remove it only on Tablets and Mobile

If you wanted to keep the social icons on the desktop and disable/remove it only on mobile from DIVI’s bottom bar/footer, we can use a little bit of CSS. First make sure you have checked the “SHOW SOCIAL ICONS” in the Theme Customizer–> Footer –> Footer Elements as shown in the image above.

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.

/* Disable Social Icons on Bottom bar on tablets and smaller devices */
@media all and (max-width: 980px) {
#footer-bottom .et-social-icons {display: none;}
}

This will show the icons on the desktop but will remove it from the tablet and mobile devices as shown below.

Social Icons removed on Mobile – DIVI

I hope this tip was useful and you get a chance to use it on your website. If you do, please leave me a comment. For more such tips on WordPress and DIVI, check out my DIVI Blog.

Related Posts –

• How to Remove the Bottom Bar/Footer from DIVI
• Add Background Image to the DIVI Footer/Bottom Bar

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.