Add a Phone Number to Divi's Main Menu

Boost Your Site and Save 20% this Weekend

Join 50,000 users and build a better site with 20% off all Divi Booster plugins.

Discount applied at checkout. Offer ends Monday!

Day(s)

:

Hour(s)

:

Minute(s)

:

Second(s)

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";
}

Result

If all has gone to plan, you should now see something like the above in your main menu.

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.

Want get more out of Divi?

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

6 Comments

  1. Thanks a lot. It really work.

    Reply
    • Glad it helped, Arindam :)

      Reply
  2. 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
  3. 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

Your email address will not be published. Required fields are marked *

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

6 Comments

  1. Thanks a lot. It really work.

    Reply
    • Glad it helped, Arindam :)

      Reply
  2. 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
  3. 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

Your email address will not be published. Required fields are marked *