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>Related Post: Adding JavaScript / jQuery to Divi.
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.
Related Post: Adding CSS to the Divi Theme
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.
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!
It perfectly works, thank you.
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!
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!