Jump to content

Code to change my Menu Arrow into a 3-line hamburger on mobile (7.0 version)

Recommended Posts

Hi everyone,

I don't know much about coding.

My NAV folder's drop down menu on mobile shows with a little arrow on the right side, doesn't look like the type on the desktop version, and can barely be seen on a phone.

I need to change that little arrow icon into a 3-line hamburger icon.

How do I do that?

My site is www.aphotois1000words.com and I'm on version 7.0.

Thanks in advance for any help you can provide! :)



Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

We can't easily change the dropdown menu style as it's just a select type dropdown and the formatting is generally handled by the browser you're using. You'll probably notice that this looks different on different devices or even if you were to use chrome on your phone instead. This is just the type of menu this particular template has. There are ways to style it but its kind of a larger job to do something like that and build you a more typical looking menu.

Link to comment

for sizing you can do this

@size: 40px; //change me to make it bigger
@media only screen and (max-width:640px) {
  nav.main-nav:before {
    font-size: @size;
    width: @size;
    height: @size;
    line-height: @size;

It's totally doable to rebuilt your menu to look better but unfortunately it's a decent amount of work so it's not something I you can do with some simple css. Most likely something you'd need to hire someone to do.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

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