Secondary Header Social Icons on Right

Written by Dan Mossop

By default, the secondary header in the Divi Theme will display the social icons on the left when the contact information (phone / email) are enabled, but on the right if there is no contact information. If you'd like to display the social icons on the right-hand side, even when you have contact information displayed, here are a couple of ways to do it.

Moving the Social Icons to the Right in Divi Booster

Divi Booster includes an option for moving the social icons to the right-hand side of the secondary header bar. 

On the Divi Booster settings page, simply check the box at "Header > Top Header > Put social icons on the right" and save the changes.

Moving the Social Icons to the Right with JavaScript / CSS

To manually move the social icons to the right, you can add the following JavaScript to your site:
<script>
jQuery(function($){
	$('#et-info .et-social-icons').prependTo('#et-secondary-menu');
	$('#et-secondary-menu .et_duplicate_social_icons').remove();
});
</script>
This will move the social icons to the right as soon as the page loads. If you want to avoid the icons briefly showing on the left before the page has fully loaded, you might like to add this CSS to your site as well:
<style>
/* Hide social icons while still on left */
@media only screen and (min-width: 981px) {
	#et-info #et-social-icons,
	#et-info .et-social-icons { 
		display: none; 
	}
}
</style>
I'd recommend adding this in using the "Divi > Theme Options > Integration > Add code to the head of your blog" box to ensure it is applied early enough to hide the unmoved icons.

Check out Divi Booster

Divi Booster upgrades Divi with hundreds of new features to help you build awesome sites with ease. Easily move your social icons to the right with just a simple checkbox option and much more.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

5 Comments

  1. Thanks for providing this code! However, the CSS snippet needs to be updated.

    Replace #et-social-icons with .et-social-icons to remove the "blinking" effect.

    Reply
    • Awesome, thanks Victor! You're exactly right – looks like Divi has switched from using an ID to using a class for the social icons. I've added the .et-social-icons version alongside #et-social-icons so that it will work in both old and new versions of Divi. Much appreciated!

      Reply
  2. It perfectly works, thank you.

    Reply
    • I tried this, and the contact info is to the left of the SM icons, but they're not split. They are right-justified. Is there another setting that I'm missing? Thanks!

      Reply
      • Hi Cheryl, the original wording of this post was not particularly clear. As you know, if you have the contact information and some social media icons enabled, they will both display on the left hand side, with the contact information as the left-most of the two components. The intention in this post is to separate the two components and move the social media icons to the right hand side of the header. So you'd end up with the contact information on the left hand side, and the social media icons on the right hand side.

        I realize now that referring to this as "splitting" wasn't a very helpful description. Really all that is happening is that the social media icons are moved to the right hand side. The contact info isn't really involved at all. I've updated the post to better describe what's actually going on (and have updated the code with a new version that is more consistent with how Divi treats the social icons and solves a few niggling problems).

        I hope that makes sense. If this isn't the effect you're trying to achieve, perhaps you can describe what you are hoping to achieve? Thanks!

        Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest Posts

Fade a Divi Image Module Edge into the Background

Want to create a stylish fade effect on your Divi image module—where one side fades smoothly into the background? With a bit of CSS, you can make any edge (or corner) of the image fade out: top, bottom, left, right, or even diagonally.Fade a Divi Image Module Edge...

Hide the Header and Footer in the Hello Elementor Theme

Removing the default header and footer from your Hello Elementor theme allows for a streamlined and distraction-free website design. This is especially useful when creating unique landing pages, full-width layouts, or custom headers and footers with a page builder. In...

Setting up the Divi Password Box Module

Setting up password protection on a page can help you control access to sensitive or private content in WordPress, allowing only authorized visitors to view certain sections. With the Divi Password Box module, you can replace the plain Divi password form with a fully...

Open Divi Social Media Icons in a New Tab

Ensuring your website's social media icons open in a new browser tab creates a seamless user experience and keeps visitors engaged with your site while allowing them to explore your social media presence. This approach prevents users from navigating away from your...

Set Hover Color for Menu Links in the Divi Menu Module

Customizing the hover color of menu links lets you enhance the user experience and maintain visual consistency with your website’s brand. By setting a specific hover color, you can guide visitors' attention and improve navigation feedback. In this guide we show you...

Random Posts