Move Secondary Header Social Icons to Right
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 with JavaScript / CSS
To manually move the social icons to the right, you can add the following JavaScript to your site:
jQuery(function($){
$('#et-info .et-social-icons').prependTo('#et-secondary-menu');
$('#et-secondary-menu .et_duplicate_social_icons').remove();
});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:
/* Hide social icons while still on left */
@media only screen and (min-width: 981px) {
#et-info #et-social-icons {
display: none;
}
}Related Post: Adding CSS to the Divi Theme
Moving the Social Icons to the Right in Divi Booster
If you want to avoid manually adding the JavaScript / CSS code to your site, there is an option in Divi Booster which will add the code for you. On the Divi Booster settings page, simply check the box at "Header > Top Header > Put social icons on the right" and save the changes.
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin
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!