[Resolved] Navigation as header alignment with content

[Paul]

When using navigation as site header, how can I keep the logo and menu aligned with content as the screen size reduces? Same for the footer with copyright content and a menu added to the footer bar widget.

Container alignment is set to boxes.

Thanks,
Paul.

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know 🙂

[Paul]

Yeah, added below.

[Leo]

Just to confirm, you are happy with the desktop layout:
https://www.screencast.com/t/GtVtcE8fdB

But want to move the logo in to align with the title Home on smaller screen?
https://www.screencast.com/t/0c9YBRYtx

[Paul]

Yeah that’s right! A fix for that would be great.

Can I ask as well (can open a new question if needed)…If the primary nav was centered, is there a way to have the logo and menu items fill the available space? Flexbox?

I appreciate that’s a different question to my original one.

Thanks,
Paul.

[Leo]

Give this CSS a shot:

@media (max-width: 1110px) {
    #site-navigation .navigation-branding, #sticky-navigation .navigation-branding {
        margin-left: 40px;
    }
}

A new topic for the separate question would be appreciated 🙂

[Paul]

I might need to add a min-width too but that works yeah, thanks.

[Leo]

No problem 🙂

[Author]

Posts