How to Add Your Phone Number to the Navigation Menu
Have you ever noticed how some websites show their phone number really clearly at the top of the page? At first look, you may not think about it but there is a plan behind making the contact details so easy to find!
Businesses know that some customers still want to talk to a real person sometimes instead of just using websites when doing research. Adding your phone number to the navigation menu lets people know that they can reach the company quickly and easily if they have any concern. Moreover, contact details that are easy to see build trust because it makes the business seem more open and willing to talk.
So, if you’re here to add a phone number to the navigation menu of your website, you’re in the right place!
First, we'll walk through adding a clickable phone number to the WordPress and OpenCart top menu. Then, we'll provide the HTML code that can be used on any website. Let's get started!
Adding phone number to WordPress' navigation menu
Depending on your WordPress theme, there are different ways, but one of the common methods to add a clickable phone number to the navigation menu is following the below instructions:
1. Log in to your WordPress admin dashboard.
2. Navigate to Appearance > Menus.
3. Click Manage with Live Preview to visually edit menus. This will open the WordPress customizer, showing menus on the left.
4. Find your main navigation menu (e.g., Main Menu, Primary Menu) and choose to edit.
5. Click the + Add Items button.
6. Choose Custom Links from the top of the sidebar.
7. Set the URL to "tel:" followed by your phone number in [+][country code][subscriber number including area code] format, without brackets nor hyphens. For example, if your number is +1-555-123-4567 (or +1 555 123 4567), set the URL as "tel:+15551234567".
8. Enter your number in standard format as the Link Text,e.g., "+1-555-123-4567", or "+1 555 123 4567".
9. Click the Add to Menu and then Publish to save your changes.
It's also possible to add a phone number using page builders and widgets in WordPress. For example, builders like Elementor, Beaver Builder, and Oxygen allow for easy insertion of a phone number or link via their widgets.
However, the method outlined above works directly in the WordPress editor and will display the number consistently in your site navigation across any page or template. Editing the menus provides a more integrated solution that works universally without reliance on a specific page builder plugin.
Adding phone number to OpenCart's top menu
If you’re an OpenCart user, you’ve already seen a phone number at the top right of the storefront menu. This phone number comes with the default theme but is not clickable.
To easily change the number, you only need to:
1. Go to your OpenCart admin dashboard.
2. Navigate to System > Settings and, under Action, click the Edit icon.
3. Click on the Store tab, find the Telephone field and enter your phone number.
4. Click on the Save icon.
However, if you want to replace it with a clickable phone number, follow the instructions below (this method does not require any extension):
1. Log in to your cPanel dashboard or FTP.
2. Open File Manager from the Files section.
3. Double click on the public_html folder in the left sidebar.
4. Navigate to catalog > view > template > common (or catalog > view > theme > theme-name > common).
5. Select to edit the header.twig (or header.tpl) file.
6. Find this line of code in the file (your code might be different so search for "phone", without quotes):
<li class="list-inline-item"><a href="{{ contact }}"><i class="fa-solid fa-phone"></i></a> <span class="d-none d-md-inline">{{ telephone }}</span></li>
7. Replace it with this HTML code:
<li class="list-inline-item"><span class="d-none d-md-inline"><a href="tel:+15551234567"><i class="fa-solid fa-phone"></i> +1-555-1234-567</a></span></li>
Instead of +15551234567, put your own phone number. The "tel:" before the number makes it clickable. Also, between the <a> tags, you can format the number as you want visitors to see it.
In fact, this is a way to customize the header in your OpenCart store. For more details on header customization options, you can try installing an OpenCart extension or hire a developer. We at Earth Girl Hosting can also help design and developer your websites. Feel free to contact us!
Adding phone number to the navigation menu using HTML code
Adding a phone number link to the navigation menu in HTML is quite simple! If your website already has a navigation bar, you can use the following code inside the <header>, <nav>, or on any header or navigation with different tags:
<a href="tel:+15551234567">+1-555-1234-567</a>
This will create a clickable call link using the "tel:" protocol. The example below shows how to add this line of code inside your navigation section:
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="tel+15551234567">+1-555-1234-567</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
If you don’t have a navigation menu yet, I strongly recommend you take a look at how to add responsive top navigation on the w3schools website.
5 best examples of phone number in navigation menu
I came across some great examples of how other sites showcase their phone numbers that are super clear and easy to find. Thinking it could give you ideas for your own website, I'm sharing five great ones that I saw.
No matter the styling, the goal is to make your number impossible to miss! Don't be shy about tweaking small things until your number looks perfect in its new home. Who knows, seeing what others have done successfully could untap a whole new approach that grows on you. I'm hoping at least one example jumps out as just the inspiration you needed.
Bentobox
The Bentobox website prominently features its phone number in the top navigation bar on the right side. Next to the "Sign In" link, the number stands out against the light background color.
There is enough spacing between it and the other menu options, ensuring the number catches the eye of every visitor.
The clear placement and formatting makes it easy for users to notice the contact information without digging for it elsewhere on the site.
Jefferson electric
The Jefferson Electric LLC website makes sure their phone number is easy to spot for anyone seeking services. At the top of both the desktop and mobile views sits the number, highlighted clearly in bright green.
The strategic position at the very top of the page catches the eye right away. Even when the main menu condenses for smaller displays, the phone number retains its top-level position next to the hamburger icon (mobile menu icon).
With just a glance, users can promptly kick off a conversation to discuss their electrical needs. I really like this simple yet effective design!
Veribest cleaners
Veribest Cleaners takes a distinctive approach to showcasing their phone number. Rather than placing a clickable number directly in the standard navigation menu, they opted to embed the number details with their logo image at the top of the page as a JPEG image.
By keeping the phone contact information closely integrated with the company logo, it effectively engraves both the name and how to reach out firmly in the visitor's mind upon initial viewing of the page. However, I should say that this is not my personal preference or aesthetic taste.
Hyperlink infosystem
At the top of the Hyperlink Infosystem website are three international phone numbers. Positioned above the main navigation menu in the header section, the contact details are the first element a visitor encounters.
By placing the telephone numbers at the highest level of the site architecture and prior to any other navigational elements, Hyperlink Infosystem communicates its priority of accessibility across geographical regions and willingness to connect with new and existing clients globally.
IT Monks
IT Monks provides an intuitive option for visitors to access their contact phone number from the navigation menu. Located at the top-right of the site, a phone icon is displayed that, when hovered over, expands to reveal a module containing the company's telephone number in a large, clear format.
This contact mechanism offers a dual interaction, allowing users to both see the number as well as elect to "Request a Call" with one click by filling in their own details. This way, hovering over the phone icon reveals the phone number while maintaining seamless browsing in-page.
Last Words
You know that making contact details easily seen in the top site header reassures visitors help is just a call away! In this blog post, we provided instructions on different ways to add a phone number to the navigation menu across website platforms like WordPress, OpenCart, and even plain HTML.
We also highlighted five real-world examples of websites that effectively showcase their numbers in their navigation bar. Some of the best practices seen included using high color contrast, strategic placement at the very top, and interactive dropdown menus.
While the formatting details may differ depending on your specific website, the core goal remains the same - to effortlessly inform users that your business can be reached by phone with a single glance of their eyes towards the top of each page. This helps ensure an optimal business website experience for all visitors.
I hope these techniques and design case studies provide plenty of inspiration for optimally displaying your contact info on your own navigation menus going forward. Let me know if any other questions come up!
