Updated 2/16/2015
Several readers have inquired how to create a mobile click-to-call link in a menu item. The phone number should retain its plain text appearance on a desktop computer but be a clickable link on a mobile device.
We’ve found a brand new plugin that will do just that. Not only does Click ‘N Tap work with the latest smartphones, it also has extended functionality for sending an SMS message, making a Skype call, or starting a FaceTime session. If you want an easy-to-use plugin, check out this blog post to learn more about Click ‘N Tap plugin.
Otherwise, if you’re looking for a technical discussion on creating a CSS media query, read on!
Today’s post explains how to use a CSS media query for a click to call link that does the following:
1. For desktop devices, display phone number as text even if browser is resized.
2. For mobile devices, display phone number as a click to call link.
So let’s first look at how you can add custom CSS to a WordPress site. Then we’ll look specifically at how to use a CSS media query for a click to call link.
Add Custom CSS to WordPress
There are a few ways you can add custom CSS to a WordPress site to override default styles. To learn how to add custom CSS to WordPress, please refer to this blog post.
However you decide to add your custom CSS code is up to you. The remainder of this post will look at how to use a CSS media query for a click to call link.
Use a CSS Media Query for a Click to Call Link
For this tutorial, we will be using the Simple Custom CSS plugin. Once it has been installed, go to the dashboard and click on Appearance>Custom CSS:
Copy the following code segment and paste it into your custom CSS file.
.call{display:none !important;}
@media only screen
and (min-device-width : 220px)
and (max-device-width : 790px) {
.tel{ display:none !important;}
.call{display:block !important;}
}
Once done, click the Update Custom CSS button to save the file:
Next, go to Appearance>Menus to add the first menu item.
The CSS classes option must be enabled for your menu item. If it isn’t enabled, click on Screen Options at the top right of the dashboard under the “Howdy” message and check the checkbox for CSS classes:
We are now going to add a new menu item and apply the “tel” CSS class as follows:
Next, we are going to add a second menu item and apply the “call” CSS class as follows:
Save the menu items.
Test your work on both desktop and mobile. If you followed all of the above steps, your phone number should be a click to call link on a mobile device and plain text on a desktop.
Now you know how to use a simple CSS media query to put a clickable phone number in a WordPress menu item. The query will detect whether a visitor is using a mobile device or desktop and display the phone number correctly.
Please try it out and leave a comment if you have any questions or problems.
Leave a Reply
2 Comments on "How to Use a CSS Media Query for a Click to Call Link"
Hey Michelle,
Thanks so much for this great info. I applied your instructions on how to click to call with the menu items and it works perfect!
I do have a question about if I were to apply the html code Call us! elsewhere and don’t want the desktop feature to have the click-to-call feature as we have done with the menu items, how would I go about doing that?
Thanks in advance!!
Hi Jessica, I’m glad to hear this post was helpful to you! Thanks for letting me know and I’ll put together another post to answer your question as time permits.