Something I get asked from time to time is how to hide the phone number / icon the Divi Theme. Here's how to do it:
Hide the Phone Number and Icon
To hide both the phone number and icon, you can use the following CSS:
/* Hide the phone icon and phone number */
#et-info-phone { display:none !important }Related Post: Adding CSS to the Divi Theme
Hide the Phone Icon
If you can see the phone icon, but no number, the first thing to check is that there aren't any stray spaces in the phone number box – as the phone icon will show even if there is just a single space in there. Deleting the spaces should get rid of the phone icon.
If that doesn't help, or you actually have a phone number you want displayed, you can hide just the phone icon using this CSS:
/* Hide only the phone icon - leave the phone number visible */
#et-info-phone:before { content:'';}Hide the Phone Number
To hide just the phone number, but leave the phone icon visible, you can use the following CSS:
#et-info-phone {
display: inline-block;
max-width: 1em;
visibility: hidden;
}
#et-info-phone:before {
visibility: visible;
}Displaying the phone icon but no number is not, by itself, particularly useful. To let your users initiate a call to you by clicking on the icon, you can make turn the phone number / icon into a "click to call" link.
Awesome bit of code, as always! Thank you!
Hi, Just added code but after phone icon the email icon goes down on another row.
Thanks!!
Hi Francesco, is there any chance you're able to share a link to the site you're working on. I've just tested each of the three pieces of code on my test site and the email stays in place for me in each case. I'm guessing there must be some difference in our setups that hopefully I can spot if I take a look at your site. Thanks!
Awesome work man, any chance there is a way to do this with the email address instead and on mobile only?
Thanks for any help!
Hey Tony, I've just published a post with the corresponding code for the email address / icon:
https://divibooster.com/hide-the-email-icon-and-or-email-address-in-divi/
To apply the code on mobile only, you can wrap the code in the following media query:
@media only screen and (max-width: 981px) { // Your CSS code here }So the last example in that post, to hide the email address and leave the icon visible, would become:
@media only screen and (max-width: 981px) { #et-info-email { display: inline-block; max-width: 1em; visibility: hidden; } #et-info-email:before { visibility: visible; } }I hope that helps / makes sense. Thanks!
Hi Dan, Great job,
but is it possible to hide the number and keep the phone icon?… :)
Hey Aurélien, it certainly is. I've updated the post with the relevant CSS. Hope it helps!
Thanks, Dan. I was a little nervous, as I am new to both Divi and CSS snippets. (I was afraid I'd break something, but everything worked like a charm. As long as I know what to copy and paste and where to put it, I'm fine. Thanks again. Wouldn't mind if you put it in a future update in Divi Booster, though. ;)
I'm glad you got it working, Katherine! I'll try include it in a future update :)
Thanks!
I did find that your first snippet of code worked better for me – as the second one ended up causing the bar to grow larger (taller). Using the first one did the trick.
Wow, this works like a charm. Thanks!
Hi,
I'm a bit late to the discussion! I was so excited to find this. I'm using newest WP with Divi and Bruno child theme. The code isn't removing the phone icon for me. Any advice?
I appreciate you help.
Hi Kay, any chance you're able to share a link to your site so that I can take a look? I'm not sure whether Bruno changes the way the phone icon is implemented, or if it's just a problem adding the CSS. Thanks.
Hi Dan,
Besides removing the phone icon, do you know how to change the phone number and email adres in the secondary nav menu into text?
I'd like to have it say: Ordered before 16.00 = Free next day delivery!
Hi Kevin,
You should be able to do what you want by setting the phone number to "Ordered before 16.00 = Free next day delivery!" in the customizer, and then hiding ONLY the phone icon using this CSS:
#et-info-phone:before { content:'';}Note that you'll need to remove the previous CSS I gave you, which hides both the phone icon and the phone number.
You could do something similar with the email address, but it's a bit harder as you need to prevent Divi from turning it into a clickable link. Let me know if it's something that you need and I'll try to do it.
Awesome Dan, that did the trick! Brilliant solution, should have come up with that myself. But I am not so bright with these things.. haha
Ha ha :)