[Support request] Need the top menu in header widget horizontal

[Bebe]

I need to modify the menu inside the header widget to be horizontal like the top level menu.
http://hiddenvalleylakegolfclub.com/beta/

[Leo]

Hi there,

Not too sure what you meant? The header widget is currently just a Member Log In link?

Let me know.

[Bebe]

Sorry, it has an additional link that only shows when you’re logged in. I just need them to show side by side rather than underneath.

[Bebe]

It’s a menu inside that widget, not just a link.

[Tom]

Give this CSS a shot:

.header-widget .widget .menu li {
    display: inline-block;
    margin: 0 5px;
}

.header-widget .widget .menu li ul {
    display: none;
}

[Martin]

Hi,

This code works great for desktop but I’d like the menu to stay on two separate lines on mobile. Is that possible?

Thanks!

[David]

Hi there,

you can add the Code that Tom provided inside a media query to it only applies to larger devices:

@media (min-width: 769px) {
    .header-widget .widget .menu li {
        display: inline-block;
        margin: 0 5px;
    }
    
    .header-widget .widget .menu li ul {
        display: none;
    }
}

More info on @media:
https://docs.generatepress.com/article/responsive-display/#responsive-breakpoints

[Martin]

Works a treat thank you!

Just one more thing – the header widget is appearing above the logo on mobile view.

Can I re-arrange so the header widget appears below the logo?

Thanks!

[David]

Try this CSS:

@media (max-width: 768px) {
    .inside-header {
        display: flex;
        flex-direction: column;
    }
    .site-logo {
        order: -1;
    }
    .nav-float-right .header-widget {
        top: unset;
    }
}

[Martin]

Thanks this works!

[David]

You’re welcome

[Author]

Posts