Show Divi Header Social Icons on Mobiles

This post may contain referral links which may earn a commission for this site

Show Divi Header Social Icons on Mobiles

Increase traffic to your social pages with social icons on mobiles

Since version 2.4, the Divi Theme no longer displays the secondary header social icons on mobiles. If you'd like your mobile users to see the same social icons your desktop users do, here are a couple of ways to enable the secondary header icons on mobile devices.

Show Social Icons on Mobiles using CSS

You can use the following CSS to enable the social icons on mobiles:

/* === Show social icons on mobiles === */
/* src: https://divibooster.com/show-divi-header-social-icons-on-mobiles-divi-2-4/ */
@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; 
    } 
}
/* === END: Show social icons on mobiles === */

Show Social Icons on Mobiles with Divi Booster

Divi Booster includes an option to allow you easily enable the social icons on mobiles, without needing to add any code. On the Divi Booster settings page, simply tick the "Header > Top Header > Show secondary nav bar social icons on mobiles" option and save the settings. Now your social icons will show up for mobile users.

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

6 Comments

  1. Thanks so much. The fixed the issue. I have no idea why the icons wouldn't automatically just show up on mobile when this option is chosen in the the theme settings.

    I had to make slight adjustments to the padding, etc, in the end looks great.

    Reply
    • You're welcome, happy! Yeah, I'm not sure why they are hidden on mobiles – for a cleaner look, I guess? Anyway, I'm glad you got it looking the way you want 🙂

      Reply
  2. Hey Great tip. I was actually trying to enable the social icons on the mobile version. Thanks!

    Reply
  3. Nice thanks admin for sharing useful information

    Reply
  4. Hi Dan,

    Another question if you don't mind. Can I also use this to show the secondary menu items seperately outside of the hamburger menu on mobiles?

    I love your divi boosters, thanks for creating it!

    Reply
    • Hey Kevin, I don't have a way to show secondary menu items outside the hamburger menu. However, I've just added an option to Divi Booster (under "Header > Mobile") to remove the secondary menu items from the hamburger menu. Just be aware that they won't show up elsewhere, so this may or may not be of use to you. I'll try to come up with an alternative location for the secondary menu items in the future.

      Reply

Submit a Comment

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

Hundreds of new features for Divi
in one easy-to-use plugin

6 Comments

  1. Thanks so much. The fixed the issue. I have no idea why the icons wouldn't automatically just show up on mobile when this option is chosen in the the theme settings.

    I had to make slight adjustments to the padding, etc, in the end looks great.

    Reply
    • You're welcome, happy! Yeah, I'm not sure why they are hidden on mobiles – for a cleaner look, I guess? Anyway, I'm glad you got it looking the way you want 🙂

      Reply
  2. Hey Great tip. I was actually trying to enable the social icons on the mobile version. Thanks!

    Reply
  3. Nice thanks admin for sharing useful information

    Reply
  4. Hi Dan,

    Another question if you don't mind. Can I also use this to show the secondary menu items seperately outside of the hamburger menu on mobiles?

    I love your divi boosters, thanks for creating it!

    Reply
    • Hey Kevin, I don't have a way to show secondary menu items outside the hamburger menu. However, I've just added an option to Divi Booster (under "Header > Mobile") to remove the secondary menu items from the hamburger menu. Just be aware that they won't show up elsewhere, so this may or may not be of use to you. I'll try to come up with an alternative location for the secondary menu items in the future.

      Reply

Submit a Comment

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