Need Help In Removing Menu Button

Topic summary

A user is experiencing two CSS customization issues with the Spin Template:

Primary Issue:

  • Cannot remove the “Menu” text label from the desktop navigation
  • Wants to display only the hamburger icon
  • Has attempted multiple community-suggested CSS solutions and edited base.css without success
  • Includes a screenshot showing the current menu appearance

Secondary Issue:

  • Unable to change the website’s background color to white
  • Multiple CSS code attempts have failed to work with this specific template

The discussion remains open with no solutions provided yet. Both problems suggest potential template-specific CSS conflicts or override requirements.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.

Hi! I’m currently setting up my website using the Spin Template, but I’ve run into an issue — I can’t seem to remove the word “Menu” on the desktop view. I only want to display the hamburger icon, but even after trying several community-suggested codes that i’ve search and try editing the base.css, it still doesn’t work.

I also faced issues when trying to change the entire website background to white. I’ve tried adding different CSS codes but none of them seem to work with the Spin Template.

Hey @user2588

Thanks for posting this to the Shopify Community.

It sounds like the “Menu” label and the background color are both controlled by specific CSS and Liquid structure within the Spin theme, which often overrides standard CSS changes.

To fix both:

  1. Hide the “Menu” text (desktop only):
    Go to Online Store → Themes → Edit Code → Assets → base.css (or theme.css) and add:

    @media screen and (min-width: 990px) {
      .header__menu-label {
        display: none !important;
      }
    }
    

    If that class doesn’t work, inspect the “Menu” text in your browser → right-click → Inspect → check the exact class name, then replace .header__menu-label with that class.

  2. Set the entire background to white:
    In the same CSS file, add this:

    body,
    .main-content,
    .shopify-section,
    .section,
    .wrapper {
      background-color: #ffffff !important;
    }
    

    This ensures all key layout containers inherit a white background.

If these changes don’t take effect, it’s likely due to CSS specificity or inline styling inside your section files.
In that case, please share your store URL and password (if applicable) so I can identify the exact elements and provide the precise code you’ll need.

Waiting to hear back from you.
If this was helpful, don’t forget to like it and mark it as a solution.

Thanks

Hey @TheScriptFlow_1 , thank you for your help! The code for changing the entire background works now! However, the “Menu” text still appears even after applying the code you shared in the base.css file under Assets. Here’s my website link for your review: https://j6fjuk-3e.myshopify.com/

Thanks for getting back and confirming! Glad to hear the background issue is sorted

Regarding the “Menu” text still showing — that’s actually a common case with the Spin theme. The text is hardcoded directly in the header.liquid file, which means CSS alone won’t remove it.

Here’s what you can do:

  1. Go to Online Store → Themes → Edit Code

  2. Open Sections → header.liquid

  3. Search for the word Menu (use Ctrl + F)

  4. Once found, you can either delete that line or comment it out using:

    {% comment %} Removed Menu text {% endcomment %}
    
  5. Save your changes and refresh your storefront — the text should now be gone!

If you’re not comfortable editing the liquid file, let me know — I can guide you with the exact line number or alternate CSS based on your current code setup.

Hope this helps!
If it works for you, please mark this as a solution so others using the Spin theme can benefit too.

Hey there :waving_hand:
I actually ran into that same issue when I was setting up my own store with the Spin Template, the “Menu” text wouldn’t go away even after editing the base.css.

What worked for me was adding this line of code inside my theme.liquid file, just before the closing </head> tag:

<style>
.site-nav__label { display: none !important; }
</style>

That should remove the “Menu” text from desktop view and keep only the hamburger icon visible.

By the way, I’ve been tweaking and scaling my store recently, so I totally get how small design issues like this can slow things down. Are you customizing your theme for a full store revamp or just refining the visuals?

1 Like

Hi! @TheScriptFlow_1 I was wondering — is Menu the only word I need to search for? In the Liquid file, there are tons of different menu mentions on each line. Is there a specific one I should look for? It would really help a lot if you could point out the exact line number or suggest an alternate CSS method to fix this.

Hi! @brookscreatives

Thank you for your suggestion, glad to hear from another Spin Template user. I tried the code you provided but it still doesn’t remove the text on my end. And yes, I’m currently revamping the whole website, thank you for asking!

Yeah it’s the menu word. If you don’t find then add me collaborator so that I can take a look.

Hey @user2588 ! No worries, sometimes Spin caches certain layout elements, so the change doesn’t show right away.

Try adding this version instead inside your base.css (scroll to the bottom):

.header__menu .site-nav__label {
  display: none !important;
}

Then clear your browser cache or check in an incognito tab to confirm. That usually fixes it.

A full revamp sounds exciting :fire: Are you redesigning everything from scratch or mainly updating the visuals and layout flow?

Also, I’ve been doing similar revamps lately to improve conversion and make the store look more premium. Want me to check your layout and share a few ideas that could help you boost signups or sales?