[Resolved] Sticky mobile menu, sticky footer, and fixed width site

[Jeff]

Hello, want a mobile header menu on all devices with a max width of the site at 980px. Also, I would like to have the header and footer bar colored but only at the max width of 980px. I can’t seem to get that combination and have the header and footer bar constrained to the width I want. I see that the Mobile Menu Breakpoint is for the entire window not the max width so I set that to 3000.

What happens is that on the desktop viewport the colors set in the header bar and footer bar extend across the width of the browser, while this does not happen at tablet and mobile viewport sizes.

Website: https://lannamontessori.com/

[David]

Hi there,

the mobile header you can contain with this CSS:

#mobile-header {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

And for the footer you can set that to Contained in the Customizer > Layout > Footer.

[Jeff]

Hi there. The mobile header code works but the contained in customizer > layout > footer doesn’t apply to the footer bar. However, I just added .site-info to the #moble-header code and that does the trick:

#mobile-header, .site-info {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

[David]

Glad to hear you found the solution – and thanks for sharing the updated CSS

[Author]

Posts