[Resolved] Set min width for mobile layout

[lunatrix]

I would like my site to show the mobile layout (ie – sidebar pushed to bottom, and hamburger menu) for anything lower than 1024px width.

My site is laid out with the logo to the left of the main navigation (float right), and a left sidebar.

Thanks.

[Tom]

Hi there,

For the mobile menu, the easiest way is to install GPP 1.8: https://generatepress.com/gp-premium-1-8/

Then you can turn on the Mobile Header and set the breakpoint in the Customizer.

For the sidebar, try this CSS:

@media (max-width: 1024px) {
    .sidebar,
    .content-area,
    .inside-footer-widgets > div {
        float: none;
        width: 100%;
        left: 0;
        right: 0;
    }
}

[lunatrix]

The CSS is perfect! Thanks 🙂

I wasn’t sure how to get the beta upgrade to work (I just ticked the box, but couldn’t find a way to kick off the upgrade), but that’s ok because the full menu is fine on the larger screen. I was more concerned with getting that sidebar down.

This is THE BEST theme ev-ar! 😀

[Douglas]

Hi Tom,

in Version 1.8.0-beta.1 there is a screen tip on the breakpoint text field regarding valid values. For example I enter 767 it allows me to publish but on hover over the entry field the screen tip says “please enter a valid value. The nearest valid values are 765 and 770”. I don’t think we need to use increments of 5 do we?

just checking, thanks

[Tom]

Glad it worked! The beta update should appear in the Plugins area of your Dashboard like any other regular update.

Douglas – it shouldn’t care what value you enter. Any chance you can open a new topic for this and include a screenshot?

Thanks!

[Author]

Posts