[Resolved] Mobile Menu in Top Bar Only

[Anthony]

I’m trying to have the primary menu display in the header on desktop, and in the top bar on mobile.

Right now I’m using:

@media (max-width: 1150px)
{
.menu-toggle
{
display: block;
position: absolute;
top: -195px;
}
}

But my other idea was to use the secondary menu in the top-bar and just hide/display the classes on the different sized screens.

What do you guys think is the easiest way to do this?

Thanks

[Leo]

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 🙂

[Anthony]

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

[Leo]

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;
    }
}

[Anthony]

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.

[Leo]

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.

[Anthony]

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

Just a second.

[Anthony]

ok!

[Leo]

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

[Anthony]

Excellent Leo. 👊🏻👊🏻

Thanks so much.

Anthony

[Leo]

No problem 🙂

[Author]

Posts