Sketch Theme – Hamburger Menu

design3inc · Member · Jan 11, 2020 at 6:09 am
Copy link

Add topic to favorites
Hi there,

I am currently using the Sketch theme and would like to make the hamburger menu appear no matter the width of the screen (so it will replace the horizontal top menu in all instances, on mobile or desktop). I would also like to remove the word “Menu” from next to the hamburger menu, so only the lines icon is showing. Is there a way to accomplish both of these things with additional CSS?

Many thanks!

The blog I need help with is: (visible only to logged in users)
kokkieh · Staff · Jan 13, 2020 at 8:43 am
Copy link
Hi there,

This will replace the menu with the toggle button, but when clicked on desktop it still shows the horizontal menu under the button, not the one shown on mobile devices. I can’t find a way to force the other menu to show on desktop, and suspect it might be more than just CSS code controlling that:
```
/* Add menu toggle on desktop */
@media screen and (min-width:1281px) {
 .menu-toggle {
  display:block;
 }
  .main-navigation ul:first-child {
 display:none;
  }
}
```
And to remove the text “menu” from the button, you can use this:
```
/* Remove "Menu" text from menu toggle*/
.menu-toggle {
  font-size: 0px;
}
.menu-toggle, .menu-toggle::before {
  padding-right: 0;
  margin-right: 0;
}
```
Note that you can also get help with questions like these via live chat at https://wordpress.com/help/contact
design3inc · Member · Jan 18, 2020 at 5:10 am
Copy link
Thanks for the response! Is there a way to change this using a media query of some sort? To change the breakpoint of the mobile menu so that it shows on all screen sizes?
staff-doublebassd · Staff · Jan 18, 2020 at 5:32 pm
Copy link
Hey there,

With the Business Plan, I would recommend having our staff look further into this and assist you via live chat so that we would be able to take care of this for you immediately:

https://wordpress.com/help/contact

Thanks,
design3inc · Member · Jan 18, 2020 at 6:29 pm
Copy link
Hi there,

Thank you for the suggestion! Unfortunately, staff on live chat was not able to help me on this topic. I welcome any additional suggestions from others!
staff-doublebassd · Staff · Jan 18, 2020 at 8:54 pm
Copy link
Yeah, it’s trickier use of CSS that is outside of the scope of support that we’d provide.

We have recently partnered with upwork, so I’d recommend checking them out to see if they can assist:

https://en.support.wordpress.com/upwork/

But of course, if there is someone CSS experts in this community that are willing to assist, then we also welcome posting in this thread.

Thanks,

No items found.