BugWP logo BugWP
Back to Community
Home / Community / Theme → Storefront

Fixing Common Storefront Mobile Menu and Footer Bar Issues

52 threads Sep 16, 2025 Theme → Storefront

Content

Many Storefront theme users encounter issues with the mobile menu and handheld footer bar. These elements are crucial for mobile navigation but can sometimes behave unexpectedly, disappear, or require customization beyond the theme's default options. Based on community discussions, here are the most common problems and their solutions.

1. Handheld Footer Bar Not Showing

A frequent issue is the handheld footer bar (containing search, cart, and account icons) not appearing on mobile devices. This is often caused by custom CSS that inadvertently hides the element.

Solution: Check for CSS conflicts. Inspect your site using browser developer tools to see if there's code hiding the .storefront-handheld-footer-bar element. This code could be from a plugin, your custom CSS, or your child theme. Deactivate plugins one by one to test for conflicts, and review any custom CSS you've added.

2. Customizing the Handheld Footer Bar Links

Users often want to change the default links in the mobile footer bar, such as removing the "My Account" icon for sites that don't require user accounts.

Solution: Use a custom code snippet. The following example, added via a plugin like Code Snippets, removes all links except the cart. Always test code on a staging site first.

// Remove all handheld menu links except the cart
add_filter( 'storefront_handheld_footer_bar_links', 'jk_remove_handheld_footer_links' );
function jk_remove_handheld_footer_links( $links ) {
 unset( $links['my-account'] );
 unset( $links['search'] );
 return $links;
}

3. Mobile Menu Toggle Behavior

The default mobile menu requires users to tap a small arrow to expand sub-menus, which some find difficult to use. A common request is to make the entire menu item tappable.

Important Note: Changing this behavior requires custom JavaScript and is not a native Storefront feature. Furthermore, from a user experience (UX) perspective, making the entire parent item tappable to expand a sub-menu means users cannot navigate to the page linked to the parent item itself on mobile. The arrow is designed to provide a clear distinction between tapping to navigate and tapping to expand.

4. Changing the "Menu" Text on the Mobile Toggle Button

Some users prefer to remove the text label next to the mobile menu hamburger icon.

Solution: Add the following custom CSS in Appearance > Customize > Additional CSS:

.menu-toggle span {
    display: none;
}

button.menu-toggle {
    padding: 20px;
}

5. General Troubleshooting Steps

If you are experiencing issues with mobile elements not displaying correctly:

  • Conflict Test: The first step is always to test for conflicts. Temporarily deactivate all plugins except WooCommerce. If the issue resolves, reactivate your plugins one by one to identify the culprit.
  • Check for Plugin Conflicts: As seen in the threads, plugins like WPtouch or AMP can override or conflict with Storefront's mobile styling and functionality.
  • Use a Child Theme: Always make customizations in a child theme to prevent them from being overwritten during theme updates.

By following these steps, most common issues with the Storefront mobile menu and footer bar can be diagnosed and resolved. The community often finds that conflicts with other plugins or custom code are the root cause of these problems.

Related Support Threads Support