[Resolved] Mobile Menu

Home Forums Support Mobile Menu

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #899510
    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?

    #899516
    Leo
    Staff
    Customer Support

    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/

    #899534
    Elaine

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

    #899542
    Leo
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.