Jump to content

How do you change the menu style on the mobile site?

Recommended Posts

  • Replies 10
  • Views 32.3k
  • Created
  • Last Reply

I don’t think that you can change much about the menu style unless you disable mobile styles. Here are your options (unless you are a CSS wiz).

  1. Disable your Mobile Style Settings
  2. You can get your site logo and the word “Menu” to show next to the 3-bar icon if you change your settings under Banner Content (in the Style Editor) from “Empty” to “Site Title Logo Tagline” or “Page Title Description”.
  3. Or you can keep it as is and just add the word “Menu” (or another word that makes it more intuitive) next to the 3-bar icon with a little CSS. This worked for me:

#mobile-navigation #mobile-navigation-label::after {  display: inline;  content: 'Menu';}

Good luck!

Link to comment
  • 2 weeks later...

Question on syntax. You show two colons before the word "after" -- why two? Or should it be one? Just curious if this correct and if so, why. That said, I'll try this too. It's the exact kind of solution I was also looking for (adding the word menu just to clarify what that symbol is, since many people may have no idea and will keep looking for a navigation bar). Thanks!

Link to comment
  • 1 year later...

Two Questions to emmalidster...Where did you put this code? And do I have to disable Mobile styles in order to make this work?

I don't understand when you say "pasted into Mobile or Tab and Low-res Mobile. Could you be more specific?

I don't want to disable my Mobile styles, I just want to add the words "Menu" before the 3 bar icon.

I appreciate your help. I really want to make this change to my site. Thanks!

Link to comment
  • 2 weeks later...
  • 6 months later...

does anyone know how to replace the content of the word "Menu" on both states of the toggle? The above code works to replace the content, but when the menu is toggled, it still says "Menu". I'm not a restaurant, so I don't need the word "Menu". ; ) Any help would be greatly appreciated. Thanks!

Link to comment
  • 2 months later...

I followed all the details on this blog post and it worked like a charm!!! With these detailed instructions, you can remove the hamburger/3-bar and make a menu button of your own design. http://gennick.com/database/munching-the-squarespace-hamburger

(see button on the following site: www.mypathworks.com So far, looks great on my iPhone 6 but please let me know if you run into trouble on your own device).

Link to comment
  • 1 year later...
  • 1 month later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.