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

I am using the Five template and when viewed on the mobile site the words don't show up, just the menu symbol and the web page title. Is there any way to hide the web page title and change the menu to actual words on the mobile site?

http://lumencity-lighting.squarespace.com

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!

This worked for me, pasted into “Mobile or Tab” and “Low-res Mobile” in Custom CSS.

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!

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!

@glowitz, it’s CSS3, see the MDN ::after article and CSS-Tricks on Pseudo Elements.

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!

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).

How can you switch to the hamburger mobile nav for the Avenue template?

How can you switch to the hamburger mobile nav for the Avenue template?

This can be used to remove the menu icon if needed:

#mobile-navigation #mobile-navigation-label::before {
 display: none;
}

Hope that helps others who got this to work!