[Resolved] 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

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.

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