[Resolved] Style Hamburger Menu as a button

[Yannick]

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

[David]

Hi there,

try this CSS:

#mobile-header .menu-toggle {
    background-color: #000;
    line-height: 2em;
    border-radius: 4px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Yannick]

Tha worked thank you very much!

One more question: Is there a way to switch the position of the burger graphic and the text?

[David]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Yannick]

That worked great. Thank you very much David! 🙂

[David]

Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts