Archived topic
Style Hamburger Menu as a button
5 replies · Started by Yannick on May 21, 2022
Viewing posts 1–6 of 6
Hello,
I would like to style the mobile menu toggle like a button. Similar to this example (just a random image from Google):
https://jquery-plugins.net/image/plugin/slicknav-responsive-mobile-menu-plugin.png
I tried to style it myself but wasnt able to figure it out, because the menu-toggle-button has he same height as the navigation header. Can you help me out?
Kind regards
Yannick
Hi there,
try this CSS:
#mobile-header .menu-toggle {
background-color: #000;
line-height: 2em;
border-radius: 4px;
}Tha worked thank you very much!
One more question: Is there a way to switch the position of the burger graphic and the text?
Try this:
#mobile-header .inside-navigation .menu-toggle {
display: flex;
align-items: stretch;
}
#mobile-header .menu-toggle .gp-icon+.mobile-menu {
order: -1;
padding-left: 0;
padding-right: 9px;
}
#mobile-header .menu-toggle .gp-icon svg {
top: 0;
}
That worked great. Thank you very much David! :)
Glad to be of help
This archived topic is closed to new replies.
