Written by Dan Mossop
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).
We may earn a commission when you visit links on our website.
Tailor the appearance of the image counter in the Divi Gallery module lightbox to match your brand and improve readability. By customizing the counter’s color and typography, you ensure it displays clearly and suits your design. In this guide we show you how to style...
Control the color that appears behind your images when users open in the gallery lightbox, including support for semi-transparent hues. This helps improve contrast for transparent images, align the experience with your brand palette, and create a more polished viewing...
Give your gallery lightbox a clear, on-brand close button by customizing its color and size. This improves visibility and usability against varying image backgrounds and ensures the button renders at full opacity for a consistent experience. In this guide we show you...
Control the look and feel of your gallery lightbox by applying a custom semi‑transparent background color to the overlay that appears when images are opened. This helps your media harmonize with your brand palette, improves focus on the content, and enhances contrast...
Give the lightbox navigation arrows in your Divi galleries a stylish pop and improve their visibility by adding a shadow beneath the arrows. This quick guide will show you how to make your navigation arrows stand out against the lightbox overlay.Add a Visible Shadow...
This feature has been tested and confirmed to work with Divi 5.
Hundreds of new features for Divi!
All licenses are lifetime – pay once, use forever.
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!