The “Book now” button is right there on the page. The pointer hovers over it, maybe it even changes colour, and clicking does nothing. Or a customer tells you the phone number in the header will not tap on their mobile. Nothing is visibly broken, which makes it more frustrating than an error message.
When buttons on a WordPress site are not clickable, there are only a few real causes, and you can usually find which one in a couple of minutes with a tool that is already in your browser. The structure of this guide follows that: one test first, then the causes it points to.
WordPress buttons not clickable? Find out what is under your pointer
On a desktop computer, open the page in Chrome, Edge or Firefox. Right-click directly on the button that will not work and choose Inspect. A panel opens with the page’s code, and one line is highlighted: the element the browser thinks you clicked on.
Read that highlighted line and compare it with what you expected.
- The highlight is on an
<a>or<button>tag for your button. The button is reachable. The problem is what the button does: its link, or the script behind it. Go to “The button is there but does nothing”. - The highlight is on a
<div>or<section>that is not your button, often with a name like overlay, mask, popup, sticky or header. Something invisible is sitting on top of the button and catching the click. Go to “Something is covering the button”.
As you hover over lines in the Inspect panel, the matching area lights up on the page. That makes an invisible layer easy to see: you hover its line and a large box lights up right over your button.
Something is covering the button
This is the most common reason a button looks perfectly normal and still ignores clicks. The layer on top is usually one of these:
A popup or banner that has faded out but not gone away
Many popups and cookie banners hide themselves by turning transparent rather than by leaving the page. If the plugin’s script fails partway, the box stays where it was at full size, invisible, blocking everything beneath it. If clicks fail across a whole area of the page, rather than one button, this is the likely cause. Our guide on a popup that will not close covers the popup side of this.
A sticky header that is taller than it looks
A header that stays at the top while scrolling often has an invisible area beneath its visible bar, especially on mobile, where a menu panel may be hidden but still occupying space. Buttons near the top of the screen then fail, and buttons lower down work. Scroll so the button sits mid-screen and try again. If it works there, the header is the cause.
A page builder section with an overlay or a negative margin
Page builders let you add a background overlay to a section, or pull one section up over another with a negative margin. Either can leave one section’s invisible box covering part of the section above. In the builder, select the section next to the broken button and check for overlay, margin or z-index settings. The z-index setting decides which layer sits on top when two overlap.
A layout difference at a particular screen width
If the button works on desktop and fails only on a phone, or only on a tablet held sideways, the overlap probably exists only at that width. Columns stack differently on small screens, and an element that sat beside the button on a desktop can end up on top of it. Our guide to fixing mobile display problems goes further into why layouts shift by screen size.
The button is there but does nothing
If Inspect highlights the button itself, look at its line of code.
It has no real link
A button made with a page builder usually becomes an <a> tag with an href value. If you see href="#", or no href at all, the button does not go anywhere. This happens when a template was imported with placeholder buttons, or when the link field was cleared by accident. Open the button in the editor and fill in the link. It sounds obvious, but it is easy to miss when the button looks finished.
A related case: links that do go somewhere, just to a page that no longer exists. That is a broken link rather than a dead button, and our guide on finding and fixing broken links covers how to track them down site-wide.
It depends on a script that failed
Some buttons are not links at all. “Add to cart”, “Load more”, menu toggles, tabs, accordions and “Open form” buttons run JavaScript when clicked. If any script on the page has failed, these can go silent while ordinary links keep working.
In the Inspect panel, click the Console tab and reload the page. Red lines are errors. If you see one, the button is probably fine and the script is the casualty. A missing jQuery is a frequent source of this, covered in jquery is not defined errors.
A CSS rule switched off clicks
A style property called pointer-events: none makes an element ignore clicks completely. Themes and plugins sometimes apply it on purpose, for example to a button while a form is sending, and occasionally a leftover rule applies it permanently. In the Inspect panel, the Styles section on the right lists the rules for the selected element. If you see pointer-events: none and you did not add it, note which file it comes from; that file name tells you which theme or plugin is responsible.
Phone numbers and email addresses that will not tap
A phone number in the header that does nothing when tapped is a slightly different case. For a number to be tappable reliably, it needs to be a link that starts with tel:, for example tel:+911234567890 with the full country code and no spaces. Plain text that merely looks like a phone number may or may not be picked up by the phone’s own detection, and you cannot count on it.
The same goes for email: a mailto: link opens the visitor’s mail app, but only if they have one set up. On a desktop, a tel: link may do nothing at all, or offer to open a calling app, depending on what is installed. So a customer saying “the number does not work” on a laptop is not necessarily a fault. Ask which device they used before changing anything, and consider showing the number as readable text beside the link so people can always copy it.
When links stop working across the whole site
If almost nothing is clickable, on every page, check these before anything else:
- Open a private window. If links work there, a browser extension or an old cached file was the cause.
- Look for a cookie banner or popup you have already dismissed. Visitors may see an invisible blocker that you, with the cookie set, do not.
- Think about the last change. A new plugin, a theme update or a speed setting that delays JavaScript can each produce site-wide click failures.
- Check the menu separately. If only the menu fails, especially on mobile, the menu toggle script is the likely cause rather than the links themselves.
Things to avoid while you look
- Rebuilding the button. If something covers it, a new button in the same place fails too.
- Adding custom CSS from a forum post that sets a very high z-index on everything. It might make the button clickable and then put it on top of your menu or popups.
- Testing only on your own phone. A problem at one screen width may not show at yours. Browser developer tools can preview other sizes; use that before deciding a fix worked.
When to get someone else to look
If you have found an invisible layer but cannot see where to change it, or the console shows errors in theme or plugin files, it is worth handing over. Changing the wrong z-index or margin can fix one button and quietly break three others, and the fault often lives in a template rather than in anything the editor shows you. If you would rather pay someone to fix wordpress bugs like this and explain what was covering what, that page sets out how a job works. The most useful thing to send first is a screenshot of the Inspect panel with the button selected.
The quickest version of this whole guide: right-click the button, choose Inspect, and see what the browser says you touched. The answer is usually on that one highlighted line.
Next in this series: WordPress Site Looks Different in Different Browsers?
