Add a Phone Number to Divi's Main Menu

Written by Dan Mossop

The Divi theme comes with the option to add a phone number to the top menu, and automatically adds a phone icon to it. But what if you'd like the phone number to be displayed in along side the main menu links? Here is one way to do it…

Add the phone number as a menu item

Go into the menu page of your WordPress admin area ("Appearance > Menus"), and add a new "Custom Link" to your menu. This should look similar to the above, but of course substitute in your own phone number.

Click to "Add to Menu", move the new menu item to your desired position, and then click "Save Menu". At this point, the phone number text should show up in your main menu.

Add a phone icon to the menu item

If you'd like to add a phone icon to the phone number, you can do so with the following CSS code:
#top-menu a[href^=tel]:before { 
    font-family: "ETmodules" !important;
    position: relative;
    top: 2px;
    margin-right: 5px;
    content: "\e090";
}

If all has gone to plan, you should now see the icon next to the phone number.

As an added bonus, the phone number is a click-to-call link, which means that users (on mobiles, etc) will be able to simply click on the link to call you.

Styling the Phone Link as a Button

If you want to style the phone link as a button, you can do so using the following CSS:

#top-menu a[href^=tel] {
	
	color: black;
	background-color: yellow;
	--border-width: 1px;
	--border-color: black;
	border-radius: 6px;
	--padding-top-bottom: 15px;
	--padding-left-right: 30px;

	/* Apply the settings above - don't edit */
	border: var(--border-width) solid var(--border-color);
	padding: var(--padding-top-bottom) var(--padding-left-right) !important;
	margin-bottom: calc(33px - var(--padding-top-bottom) - var(--border-width));
	margin-top: calc(-2 * (var(--padding-top-bottom) + var(--border-width)));
}

#top-menu a[href^=tel]:hover {
	background-color: orange;
}

Note that the last four CSS properties in the first block are calculated based on the values given at the start and shouldn't be edited. Doing it this way allows the correct margins to be automatically calculated to preserve the header height while saving you from having to perform this calculation yourself. 

Streamline Your WordPress Posts with AI

Transform your posts by seamlessly incorporating call-to-actions with WP Magic CTAs. Designed to enhance engagement, this AI-powered plugin will boost your site's conversion rates effortlessly.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

10 Comments

  1. Thank you so much for this! So many little things hide in divi and wordpress in general. Tips like these make all the difference with clients.

    Reply
    • You’re welcome, Larry! I’m glad the tips are helping. If there’s ever anything you can’t track down, let me know and I’ll try to point you in the right direction.

      Reply
  2. This is great. Thank you very much – such a simple addition. Can I turn just this one link into a nice button somehow?

    Reply
    • Hey Edwin, I've just added a section to the end of the post with some CSS that you can use to turn the link into a button. I hope it helps, but if you need it customized in any way, let me know. Cheers!

      Reply
  3. Thanks a lot. It really work.

    Reply
    • Glad it helped, Arindam :)

      Reply
  4. Nice! Thanks
    But how do you know phone icon equals "content: "\e090";"?
    Where can I find the index with all the other symbols icon?

    Reply
    • Hi Fi, there's a list of the built-in Divi icons here:

      https://www.elegantthemes.com/blog/resources/elegant-icon-font

      If you scroll down you'll see the icons listed with a code below each one that begins with "&#x" – replace the "&#x" with "\e" (and remove the trailing semi-colon) to get something like "\e090" that you can use as the value of the "content". Hope that makes sense.

      Reply
  5. Great tip! But my site has one menu in English version and one in French version. With this code, the Phone icon appears only on the English version.
    How to fix that?

    Thanks

    Reply
    • Hey Denis, it looks to me like the "URL" field of the custom link menu item might be empty for the French menu. If so, add a phone number beginning with "tel:" in to it (as shown in the image in the post) and you should get the icon. It'll also make the link into a clickable phone link, which it currently isn't. Hopefully that's the issue / solution, but let me know if it doesn't sort it. 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 *.

We may earn a commission when you visit links on our website.

Latest From Divi Booster

Enable Automatic Looping for YouTube Videos in the Divi Video Module

Enabling automatic looping for YouTube videos in your Divi video module ensures that content plays seamlessly and continuously without interruption. This feature can enhance user engagement, highlight key information, or create dynamic visual effects on your website....

Hide Video Controls in Divi Video Module

Disabling YouTube video controls in the Divi Video Module helps create a seamless, distraction-free viewing experience for your site visitors. This approach is useful when you want full control over how your video content appears and is interacted with on the page, or...

Mute YouTube Videos by Default in the Divi Video Module

In the Divi Video Module, starting your YouTube videos muted by default can create a more user-friendly browsing experience on your webpage. It is particularly beneficial for reducing distractions, enhancing visitor engagement, and providing a seamless content preview...

Autoplay Videos in Divi Video Module

Enabling videos in your Divi video module to start playing automatically can enhance both the site's design and user engagement. To ensure full compatibility with browser requirements, such as Chrome's autoplay policy, it's often necessary to start your videos muted...

How to Add the Post Status in Divi's Dynamic Content

Divi's Dynamic Content feature is great for enhancing your post/page templates with post-specific information. While Divi includes an option to show information such as the Post Created Date using Dynamic Content, there is no equivalent option for the Post Status....

Random Divi Posts