Mobile Menu in Top Bar Only

Hi there,

Not quite sure if I understand.

So basically you are happy with the current desktop layout and just want the menu toggle to display above the logo on mobile?

Let me know :)

Yes. In the top-bar or above the logo.

Try remove the CSS you've already added, then try this only:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-direction: column-reverse;
    }
    .header-wrap #site-navigation:not(.toggled) {
        background-color: #000000;
        margin-bottom: 10px;
    }
}

Thanks for the response.

That just flips the two.

It kind of looks goofy.

I just want the .menu-toggle to appear in the top-bar on mobile.

If you look at https://perfectionlandscapingllc.com/ on mobile now, it's below the logo (I removed your code), and there's a green top bar above the logo. I would love to have it in that green part.

Your method just isn't very good (not good to use negative margin in this situation).

Can you please add my code and let me make some tweaks of the CSS?

We can simply change the menu toggle background color to the green that you want without using the top bar.

I can't stand the negative margin! Let me add your code. That's a good idea adding the green background.

Just a second.

ok!

First, change the top, left and right header padding on mobile to 0:
https://docs.generatepress.com/article/header-padding/

Then add the edited CSS:
https://generatepress.com/forums/topic/mobile-menu-in-top-bar-only/#post-966389

Excellent Leo. 👊🏻👊🏻

Thanks so much.

Anthony

No problem :)