Archived topic

Sticky navigation alignment of logo and menu on desktop

5 replies · Started by feisar on February 3, 2020

Viewing posts 1–6 of 6

February 3, 2020 at 11:07 am #1153268

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!

February 3, 2020 at 12:05 pm #1153302

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 :)

February 3, 2020 at 12:12 pm #1153310

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.

February 3, 2020 at 3:27 pm #1153432

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.

February 3, 2020 at 10:34 pm #1153631

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?)

February 3, 2020 at 11:08 pm #1153642

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

Glad I could help :)

This archived topic is closed to new replies.

Start building better websites today.