Sticky navigation alignment of logo and menu on desktop

[feisar]

I’ve got my Sticky Navigation menu working as I want on mobile devices (logo left, hamburger menu right) and ‘medium’ width devices (logo centered, full navigation centered below), which you can see at the linked site.

However, on larger screen devices, above breakpoint 1024px, I can’t get the logo floated left, and the full navigation to be floated right with space between. They are both bunched together in the middle on one line.

Navigation Alignment is set to ‘centered’ (for the medium-sized devices), but if I set it to ‘right’ it looks correct on desktop, but then not on medium-sized devices.

Any ideas how I can get it working on both medium-sized and desktop devices?

Thanks!

GP v2.42
GPP v1.9.1

[Leo]

Hi there,

Can you try setting the navigation alignment to right:
https://docs.generatepress.com/article/navigation-layout/#navigation-alignment

Then use dropdown option to set when the navigation should be below the logo and centered:
https://docs.generatepress.com/article/navigation-drop-point/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[feisar]

Thanks for the reply.

Yes, I’ve tried that with no luck. It looks good on desktop, but on medium-sized devices, both the logo and the navigation menu are aligned to the left, not centered! I’m not sure why.

I’ve changed the settings on the live site so you can see what’s happening.

EDIT: I’ve just noticed that no matter what I set the Navigation Drop Point to, it doesn’t change when it switches.

Thanks.

GP v2.42
GPP v1.9.1

[Leo]

Ahh my bad that option is only for header.

What if we use the current set up with this CSS?

@media (min-width: 769px) and (max-width: 1024px) {
    .main-navigation .inside-navigation {
        display: flex;
        flex-direction: column;
    }
    .inside-navigation .navigation-branding {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

You can adjust the breakpoint as you see fit.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[feisar]

Thank you! That’s perfect.

I had tried adjusting the CSS myself but just couldn’t get it to work.

(Incidentally, should the Navigation Drop Point affect the Sticky navigation, or is there a reason it doesn’t?)

GP v2.42
GPP v1.9.1

[Leo]

The navigation drop point only works when header is used and the navigation as a header option is not used.

Glad I could help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts