How to Use a CSS Media Query for a Click to Call Link

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.