Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1
emmalidster

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

Question

10 answers to this question

Recommended Posts

  • 0

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!

Edited by KateS
Tidy, update link

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Edited by Stacie

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
Guest
This topic is now closed to further replies.

×
×
  • Create New...