Kadence fix
Kadence Mobile Header Not Working? Fix the Layout and the Menu
The Kadence mobile header is three parts that have to line up: a header row for small screens, a trigger that opens the drawer and a drawer with a navigation element inside it. Miss one and you get a logo with no menu, a hamburger that opens an empty panel or a tap that does nothing. Each failure points at a different part.
- PassMobile row: logopresent
- PassMobile row: triggerpresent
- FailOff canvas navigationnot added
- FailMobile menu locationunassigned
- WarnNavigation scriptdelayed
- PassConditional header rulesnone
What you are seeing
- The hamburger icon shows, and tapping it does nothing
- The drawer opens but holds no links, or a list of every page
- The first tap fails and the second one works
- The desktop menu wraps onto two lines on tablets and small laptops
- Mobile header edits publish and the phone still shows the old one
Why it happens on Kadence
Most common first.
- 1
The drawer was never given a navigation element
In Customize, Header, the Tablet / Mobile view has an Off Canvas area beneath the header rows. The Trigger element opens that area, and the area shows only what has been placed in it. A trigger with an empty drawer behind it is a common Kadence mobile fault. It looks exactly like a broken menu, and it is really an unfurnished one.
- 2
No menu is assigned to the Mobile location
The Mobile Navigation element reads the menu assigned to Kadence's Mobile display location, which is separate from Primary. If nothing is assigned there, the drawer can fall back to a plain list of pages or to an old menu nobody maintains. Editing the main menu then changes nothing on phones.
- 3
A performance plugin is holding back the menu script
The trigger is opened by a small Kadence script. Settings that delay JavaScript until the visitor interacts, or that combine and defer scripts aggressively, leave the hamburger inert on the first tap or break it outright. The tell is a menu that works while you are logged in and fails in a private window.
- 4
Another header is being shown on that page
Kadence Pro's Conditional Headers can swap in a different header by page, post type or visitor, and a Hooked Element can replace the header entirely. The page settings in the editor also allow the header to be disabled or made transparent for one page. You may be editing the default header while phones on that address receive another.
- 5
The desktop header runs out of room before the switch
Kadence changes from the desktop header to the mobile one at a set screen width. A long menu, a button and a wide logo can overflow on small laptops and landscape tablets that still sit above that width, so the row wraps or overlaps. It reads as a mobile bug. It is the desktop layout being asked to fit.
How to fix it, in order
Least invasive first. Stop at the step that fixes it.
- 1
Save the settings, then inspect the mobile layout
Take a backup or export the Customizer settings first. Then open Appearance, Customize, Header and click the Tablet / Mobile icon at the foot of the builder. Confirm that a row contains the Logo and the Trigger. An element that exists only in the Desktop view will never appear on a phone.
- 2
Fill the off-canvas drawer
Still in the Tablet / Mobile view, find the Off Canvas area and add the Mobile Navigation element. Add a button, search or social icons there if you want them in the drawer. Publish, then tap the hamburger in the preview.
- 3
Assign a menu to the Mobile location
Go to Appearance, Menus, Manage Locations and set the Mobile location to the menu you actually maintain. Using one menu for both Primary and Mobile means a single edit updates both.
- 4
Test the trigger with optimization off
If the drawer is built and the tap still fails, open the site in a private window and check the browser console for errors. Then switch off the delay, defer and combine settings for JavaScript in the caching or optimization plugin, purge its cache and test again. If that cures it, exclude Kadence's navigation script from those features and turn the rest back on.
- 5
Look for a header that overrides yours
With Kadence Pro active, review any conditional headers and their display rules, and check Appearance, Kadence, Elements for an element set to replace the header. Then open the affected page in the editor and check its Kadence page settings for a disabled or transparent header.
- 6
Ease the desktop header before it overflows
Shorten top-level menu labels, move secondary links into a dropdown or the top row and reduce the logo width in the header's Logo settings. Resize the browser slowly from wide to narrow and watch for the point where items collide. Set the mobile sticky and transparent options on purpose too, since they are configured apart from the desktop ones.
Keep it from coming back
- Check every header change on a real phone, not only in the preview
- Keep the Mobile menu location assigned whenever menus are rebuilt
- Retest the hamburger in a private window after changing cache settings
- Document any conditional header and the pages it covers
The permanent fix
A faster Next.js build, with a CMS made for your business
A mobile menu is a small thing to get wrong and an expensive one, because phone visitors depend on it to reach the page that sells. If yours keeps failing after cache changes, plugin updates or a new conditional rule, too many independent parts have a say in it. In a Next.js build the header is one tested component that ships with the page, edited through a custom CMS, with no optimization plugin positioned to delay it and no second header waiting behind a rule.
| On Kadence today | On Next.js with a custom CMS | |
|---|---|---|
| What you keep updated | WordPress, the theme, its builder and every bundled plugin, all in step | Nothing on a schedule. There is no theme or plugin stack to fall out of step |
| How a page is served | Built from the database on each visit, through the theme and its builder | Built ahead of time and served as finished files from servers near the visitor |
| How you edit it | A general-purpose builder with every option the theme ships | A CMS built around what your business actually changes: services, prices, photos, posts |
| What can break it | An update to any one of those parts, or a license that lapses | A change someone makes on purpose, tested before it goes live |
Your content, your addresses and your rankings come with you: every page is moved, every old address is redirected, and you get a login to an editor that only shows what you need. A repair is still the right call for many sites, and we will say so when it is.
Want this fixed on your Kadence site?
Tell us what you are seeing. We look at the site, tell you plainly what is wrong and what it takes, and quote a fixed price before any work starts.
Which of these sounds like you? (pick any)
Frequently asked
That pattern almost always comes from an optimization setting that delays JavaScript until the first interaction. The first tap wakes the scripts and the second one finally reaches the menu. Exclude Kadence's navigation script from the delay, purge the cache and the menu opens on the first tap.
Kadence switches at a set width, and changing it is generally custom code in a child theme and not a Customizer setting. Before going that far, try trimming the desktop header so it fits the screen widths just above the switch. That is often the smaller job.
Yes, and that is what the separate Mobile location is for. Build a shorter menu under Appearance, Menus and assign it to Mobile while Primary keeps the full one. The cost is upkeep: a new page now has to be added in two places, so many sites are better served by one menu assigned to both.
Logged-in administrators usually bypass the page cache and often the script optimization too, so you are testing a different site from the one the public gets. Check in a private window or on a phone that is not logged in. A fault that appears only there points at caching or script handling, not at the header builder.
Keep reading
- ServiceMobile Responsiveness FixesMost of your traffic is on a phone, and that is where most sites fall apart. We fix the layouts, tap targets, and overflow that cost you the sale.
- ServiceDesign & Layout FixesOverlapping text and broken spacing tell a customer you do not sweat details. We fix the glitches so the site looks as competent as the business.
- ServiceForms & Scripts Not WorkingA form that quietly fails is the most expensive bug on a website — you never see the leads you lost. We fix it, then prove the message arrives.