How to remove menu heading from Turbo Theme mobile layout?

Topic summary

Issue: On Turbo theme (Shopify) mobile layout, the header shows two menu elements; the requester wants to remove the menu heading in the header on mobile only.

Context: A screenshot was attached and is central to understanding the layout duplication.

Attempted solution: Add CSS in Assets/styles.css to hide the mobile menu title:

  • span.mobile-menu-title { display: none !important; }
    Outcome: Did not work for the requester.

Follow-up suggestion: Without the store link, a second CSS selector was offered to target the header’s menu title:

  • header span.menu_title { display: none !important; }

Current status: Unresolved. Next steps are for the requester to test the second CSS and/or share the store link for accurate selector identification.

Notes:

  • The fix hinges on correct CSS selectors matching the theme’s actual markup (class/ID names may differ by version or settings).
  • If hiding only on mobile is required, a media query may be needed once the correct selector is confirmed (e.g., applying display:none within a mobile breakpoint).
Summarized with AI on February 15. AI used: gpt-5.

Hello Everyone!

I am having a issue related to the Turbo Theme.

In the mobile layout the header show two main menus.

One with heading and one with the side bar.

How to remove the menu heading from the header please guide me.

I am attaching the SS below for further reference.

This issue is occurring in mobile layout only.

I am using the Turbo theme new.

Hi,

The hide the Menu title, please add the code below in to Assets / styles.css (Online Store > Actions > Edit code > Assets).

span.mobile-menu-title {
  display: none !important;
}

Hope it helps.

Thanks.

Hello David!

It doesn’t work.

Any other solution

Hi,

If you share your link, it would be better to find out the solution.

Please try this code.

#header span.menu_title {
  display: none !important;
}

Hope it works.

Thanks.