The Divi Theme allows you to set a phone number and email address to be shown at the top of the header, as well as a number of social media icons. To right align these top header text and icons, you can use the following CSS:
@media only screen and (min-width: 768px) {
#et-info { float:right !important; }
}
On mobiles it will default to a centered layout (as the standard left aligned icons do).
I'm more interested in a way to have the number at the left but the icons on the right.
Hey Nick, to position the phone number on the left and the social icons on the right, add the following CSS to your site:
#et-info {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
You can add it at "WP Admin > Divi > Theme Options > General > Custom CSS".
Hope that helps!
In addition to my question on why the email icon is showing, I also noticed the phone isn't showing on mobile? Any idea why? And the email icon doesn't show in theme customizer, but when I go to live view it is there.
Hi again Kelly!
Looking at the issue with the email icon appearing in live view but not in theme customizer, it seems to be a quirk with Divi's customizer preview, which may not display the top header elements correctly at times (for example if the top bar is not already visible on the page). A fix that should work in some some cases at least is a refresh of the customizer. However, if the inconsistency is causing you problems and you're willing to provide a login, I can investigate this directly on your site to see if we can find a workaround.
Regarding the phone icon not showing on mobile, it should usually show up without issue. Sometimes caching could cause the page not to be updated with the added icon; clearing any site caches might resolve this. If that doesn't work, and you can share a link to the affected page, I'd be glad to take a closer look for you.
Thanks!