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

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! :)

-Stefan

try this in your custom css

 

@media only screen and (max-width:640px){
  nav.main-nav:before {
    content: "\e030" !important;
  }
}

Thank you jaeveedee!  That works.

The only thing is that the burger is much too small, and the drop down menu appears like this (see attached).

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.

Regarding the menu, i understand – but it really looks bad.

Regarding the size of the hamburger, can that be increased? If not, it's not much more visible than the tiny arrow that was there before.

Help!

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.

Thanks. 

I tried the new code and the arrow came back

I fixed it:

i added back:

    content: "\e030" !important;

Thanks again ! 🙂