Change Mobile header layout

Hi Russel,

So we can assess what needs to be done, can you provide the link to the site in question?

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

here

Hi there,

i think it would be best if we removed the the current desktop layout, and then provided you with a solution that works on all screen sizes. Could you therefore remove this:

@media (min-width: 1025px) {
    .site-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
    }

    header .inside-header.grid-container {
        position: relative;
    }

    header .inside-header.grid-container .main-navigation {
        width: 100%;
        margin-left: unset;
    }

    header .inside-header.grid-container .inside-navigation.grid-container .menu-bar-items {
        width: 100%;
    }

    header .inside-header.grid-container .inside-navigation.grid-container .menu-bar-items .slideout-toggle {
        order: -1;
        margin-right: auto;
    }

    header .inside-header.grid-container .inside-navigation.grid-container input.search-field {
        background-color: #aaaaaa33;
    }

    header .inside-header.grid-container .inside-navigation.grid-container form.search-form.navigation-search.nav-search-active {
        margin-left: auto;
        width: 400px;
    }
}

And then in Customizer > Layout > Primary Navigation set the Mobile Menu Breakpoint to 0.
That way we only have the one navigation setup to worry about.

Once thats done, let me know, and ill work on the CSS needed.

As a general note - whilst developing the site, it makes sense to leave any optimization / cache plugins disabled. Its one less thing to get in the way, and it makes it easier for us to provide custom CSS or debug issues.

Done all the necessary changes, including cache deactivation.

Try this CSS:

#mobile-menu-control-wrapper,
#mobile-menu-control-wrapper .menu-toggle{
    display: block;
    order: -1;
    margin-left: unset;
    margin-right: auto;
}
#mobile-menu-control-wrapper .menu-bar-items,
.main-navigation .menu-bar-item.slideout-toggle {
    display: none;
}
#masthead .inside-header {
    flex-direction: row;
}
#masthead .inside-navigation {
    position: static;
}
#masthead .navigation-search.nav-search-active {
    border: 1px solid;
    left: 30px !important;
    right: 30px;
    top: 100%;
    max-width: calc(100% - 60px);
    z-index: 100;
    background-color: #ffff;
}

And if you want to add a placeholder text in the search form then see here for the require PHP Snippet:

https://docs.generatepress.com/article/generate_navigation_search_output/#add-a-placeholder

Thank you very much! :)

BTW, how do I insert categories in the 'hamburger' icon now?

In Appearance > Menus build a new menu, Add your Menu items and then set the menu Location to: Off Canvas

It doesn't seem to work

Nevermind, The color hides it so I didn't notice.

However, The menu is on the far left, how can I move it?

Give the Off Canvas a Background color in Customizer > Colors

However, The menu is on the far left, how can I move it?

Edit: I'd figured it out. Thanks again! :)

Glad to be of help