Need the top menu in header widget horizontal

Hi there,

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

Let me know.

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.

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

Give this CSS a shot:

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

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

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!

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

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!

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

Thanks this works!

You're welcome