Right Align the Divi Top Header Contact Info Icons

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).

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

Divi Booster

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

25 Comments

  1. 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.

    Reply
    • 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!

      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 *.