Flatsome Mobile Menu Not Working: Why the Sidebar Stays Shut

Six ways a Flatsome sidebar menu lets a shopper down

Mobile menu complaints sound alike and have different causes. Before changing anything, write down exactly what happens on a phone, logged out, in a private tab. The pattern points to the layer that failed, and it saves you from switching off half the plugin list on a hunch.

• The icon does nothing. No panel, no dimmed page, no error a visitor can see. The script that opens the sidebar never ran.
• The first tap fails, the second works. A delay-until-interaction feature spent the first tap loading the scripts.
• The page dims but no panel appears. The overlay opened, and its styling went missing.
• The panel opens empty, or says WooCommerce not found. The sidebar's contents are switched off, or point at something that is gone.
• The panel shows the wrong links. The mobile location holds an old menu, the desktop menu, or nothing at all.
• The icon is a blank square or missing. The icon font failed, or the Nav Icon was removed from the mobile header.

If the menu misbehaves only on tablets, that is usually not a fault at all. Flatsome's stylesheet switches from the desktop header to the mobile header below 850 pixels wide, so a tablet held sideways often gets the full desktop navigation, wrapping onto two lines. The general version of this problem across themes is in WordPress mobile menu not working.

What happens between the tap and the slide-out panel

Flatsome builds its phone menu from four parts that live in four different places. Knowing them turns a vague bug into a short checklist. On the vendor's own demo store, the mobile header holds a Nav Icon element, which is a plain link carrying an instruction to open a hidden container with the id main-menu. That container sits at the bottom of every page, hidden until flatsome.js, the theme's main script, opens it as an overlay.

Older Classic builds label the panel Header Mobile Menu / Overlay; it holds the overlay position, the icon style and the Menu Elements list. The UX-Themes docs note that the Account element needs WooCommerce, and that a sidebar showing WooCommerce not found means you should activate WooCommerce or switch that element off.

The suspects, in the order we test them

1. An optimizer got between the icon and its script

This is the most common cause on Flatsome stores, and the vendor half admits it: its basic troubleshooting article tells you to reset or disable all cache and minify tools before anything else. Delay-JavaScript features hold flatsome.js until the visitor interacts, so the first tap wakes the scripts and gets lost. Combine and defer features can load the theme's script before jQuery, which the demo store loads first. Cloudflare's Rocket Loader rewrites script order on its own. Check: open the phone's page with the optimizer's JavaScript features off on staging, or read the browser console for errors as you tap. Our JavaScript errors guide explains what each message means.

2. Unused-CSS removal stripped the overlay styles

Tools that remove unused CSS look at the page as it first renders. The sidebar is hidden then, so its overlay styles can look unused and get cut. The result is a dimmed page with no visible panel, or a panel drawn as a plain list at the bottom. Check: turn off remove-unused-CSS, purge, and tap again. If that fixes it, add the sidebar's classes to the tool's safelist rather than leaving the feature off everywhere.

3. The panel's contents are switched off

In Theme Options > Header > Header Mobile, each Menu Element has an eye icon. Faded means hidden. A tidy-minded editor who hid the search box can hide the navigation by mistake one row down. Check: open the Customizer at phone width, open the sidebar in the preview and watch which elements appear as you toggle them.

4. The mobile menu location is wrong

Flatsome's docs describe a Main Menu - Mobile location for a separate phone menu and warn that it must not also be assigned to your main navigation. A store that rebuilt its menus during a redesign can end up with an old menu, an empty one, or none assigned at all. Check: Appearance > Menus > Manage Locations, and read what is assigned to Main Menu and Main Menu - Mobile.

5. The icon itself is gone

The hamburger is drawn with Flatsome's fl-icons font. If that font is blocked, often by a CDN serving it from another domain, the icon becomes an empty square or nothing at all. Flatsome fonts not loading covers that case. If the icon is missing entirely, check the Header Builder's mobile view: someone may have dragged the Nav Icon out while editing the desktop row.

Getting the Flatsome sidebar menu open again

Work on a staging copy if your host offers one. Change one thing, purge every cache, and retest on a real phone each time.

1. 1

   Reproduce it the way a shopper would

   Logged out, private tab, real phone, on the homepage and a product page. Note whether the first tap, every tap or no tap fails.

2. 2

   Switch off JavaScript optimization

   Disable delay, defer and combine features in your optimizer and any CDN script rewriting such as Rocket Loader. Purge, then test. If the menu works, turn features back on one at a time and exclude flatsome.js and jQuery from the one that breaks it.

3. 3

   Switch off unused-CSS removal

   If the page dims without a panel, turn that feature off, purge and retest. Safelist the sidebar's overlay classes before turning it back on.

4. 4

   Check Menu Elements

   In Theme Options > Header > Header Mobile, make sure the navigation element is visible and switch off Account if WooCommerce is not active.

5. 5

   Assign the mobile menu deliberately

   Create or choose one menu for Main Menu - Mobile in Appearance > Menus > Manage Locations, and confirm the main menu is not also ticked for that location.

6. 6

   Confirm the Nav Icon is in the mobile header

   Open the Header Builder, switch to the mobile view and make sure the Nav Icon sits in a visible row.

7. 7

   Update Flatsome on staging

   Move to the current Classic release, 3.20.11 as of October 2026, and retest. If the update will not install, see Flatsome update and registration problems.

If the menu still fails with every optimizer off and the settings correct, a plugin is the likely culprit. Deactivate everything except WooCommerce on staging, as the vendor recommends, and bring plugins back one at a time. Our theme plugin conflict guide has the method.

Mega menus and submenus on a phone

Flatsome's mega menus, available since 3.13.0, are UX Blocks attached to a menu item. They look excellent on a desktop. On a phone they work differently: the vendor's docs say that when the menu is assigned to Main Menu - Mobile, the item's child menu items show in the sidebar. A department menu built only as a designed block, with no real child items underneath, can arrive on a phone as a bare top-level link.

The fix is to give each mega menu item ordinary child links that mirror the block, or to build a separate, plainer phone menu and assign it to Main Menu - Mobile. A phone menu with eight clear categories usually sells better than a miniature desktop menu anyway.

Keeping the hamburger working through the next update

• Put the menu on your post-update checklist. After every Flatsome, WooCommerce or optimizer update, tap the hamburger on a real phone, logged out. If an update broke more than the menu, see theme broke after update.
• Keep one optimizer. Two tools that both delay, defer or combine scripts make failures hard to trace. The vendor's own first step is to disable them all.
• Exclude the theme's core scripts from delay features. flatsome.js and jQuery run the menu, sliders and cart; delaying them saves little and risks a lot.
• Change Header Builder layouts in the mobile view too. Editing the desktop rows alone is how the Nav Icon goes missing.
• Write down the menu assignments. A note of which menu sits in Main Menu - Mobile saves an hour after the next redesign.

Speed tuning is where most mobile menus get broken, because it is where scripts get moved. Our Flatsome speed guide shows which settings are safe to change, and mobile speed for WordPress themes explains why phones feel every extra script. If the header itself disappears rather than the menu, go to Flatsome header not showing.

When a tap on three lines needs five vendors to agree

Look at what opening one menu depends on: Flatsome's script, jQuery from WordPress, an optimizer from a third company, a CDN from a fourth, and whatever mega menu or cookie plugin sits on top. Each is reasonable. Each updates on its own schedule. A store owner who tunes for speed on Tuesday can break the menu by Wednesday without touching a theme setting. That is the WordPress theme stack in miniature.

A Next.js site ships its menu as part of one tested build, so nothing reorders its script on the live server. That costs more up front and needs a developer for layout changes. Flatsome vs Next.js weighs both honestly, and Flatsome to Next.js covers moving products and every URL. Sites we build run on Athena CMS, where Argus watches for broken links and failing forms.

Most stores should fix the menu and stay. If you want it done once and done properly, our theme troubleshooting service finds the failing layer on a copy of your site, and our Flatsome developers handle the rest. Other Flatsome fixes live in the Flatsome repair hub.