[Resolved] Mobile Menu

[Elaine]

I just read through the instructions for Mobile Header (Menu Plus) which would align the logo & menu horizontally on mobile.
However, what I want to accomplish (on mobile only) is to align my social icon block on the upper left and the menu hamburger on the upper right. Below those two items is the logo which is centered. The logo size & positioning that is there now is fine. However I would like to move the hamburger menu above the logo to be positioned in the upper right of a mobile screen.
Any suggestions?

[Leo]

Hi there,

This should get you pretty close:

– Create a new inside_navigation hook element:
https://docs.generatepress.com/article/hooks-element-overview/

With the following content:

<div class="mobile-social-icons hide-on-desktop hide-on-tablet">
    Insert social icons here
</div>

Choose Entire site in Display Rule.

– Add the following CSS:

@media (max-width: 768px) {
    .header-widget {
        display: none;
    }
    .inside-header {
        display: flex;
        flex-direction: column-reverse;
    }
    .main-navigation .menu-toggle {
        flex-grow: 0;
        margin-left: auto;
    }
}

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

[Elaine]

Wow, thanks for this code and I will try it, thanks!

[Leo]

No problem 🙂

[Author]

Posts