[Resolved] Move sidebar position on mobile

[Ivan Cazorla]

Hi there,

I’ve got filters for price, categories and more on my left sidebar, but in mobile the sidebar displays after the content, so there’s no way users can use the filters for searching a product.

Is there any way to display the sidebar before the conent in mobile?

https://www.deacampada.com/categ/tiendas-de-campana/por-tipos/

Thanks,
Ivan

[David]

Hi there,

try this – it will apply to any pages with a sidebar:

@media (max-width: 768px) {
    .left-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

or this will target on the woocommerce archives.

@media (max-width: 768px) {
    .archive.woocommerce.left-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

[Ivan Cazorla]

it works, thanks!!

[David]

You’re welcome

[Sarah]

Is there a way to get the archive title to still display above the sidebar for this?

[David]

Hi there,

Yes, if you use a Header Element to to display the archive title, this will appear above the content / sidebar

https://docs.generatepress.com/article/header-element-overview/

[Eugene]

Hi David

Sorry for digging this one up. This CSS tweak is causing CLS issues in Pagespeed.dev and I’m wondering if there is perhaps a quick solution for this?

I tried adding the CSS as high up as I could but it still flashes the main content first

See 2 screenshots:
https://prnt.sc/wudpuGlD3L2w
https://prnt.sc/6r3BVtFaI3cd

Your help would be highly appreciated

[Ying]

Hi there,

Can you open a new topic and link us to your site?

You can use the private info field to send us your site link 🙂

[Ioannis]

Hello, reviving this old thread, I am facing the exact same issue but neither solution seems to have any affect on my mobile view. If I should have started a new thread let me know. I am using custom left sidebars for navigation, which are different for each category, could this be the reason the code does not work?

I am using the latest versions for WP, woocommerce, GP plugin and theme.

The website is https://kidzbooks.gr

[David]

Hi there,

this CSS should work:

@media (max-width: 768px) {
    .left-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

Where did you add it ? Can you try adding it before any other CSS ?

[Ioannis]

Hi David, I was adding it to the custom css section at the customizer, right at the bottom. When I pasted it at the top of the list, even above GP’s declarations, it worked.. I thought about adding “!important” flags but I didn’t see any conflicts.. Anyway, it is fine now, thank you very much, you’ve been very helpful, as always.

[David]

Glad to be of help

[George]

Where to add this CSS? I tried adding it on “Additional CSS” customizer but it doesn’t work, the right sidebar still shows at the bottom of the page.

Also, does the “Additional CSS” on the customizer apply to one page or the entire site’s pages?

[David]

Hi there,

try this CSS for the right sidebar:

@media (max-width: 768px) {
    .right-sidebar .site-content {
        display: flex;
        flex-direction: column-reverse;
    }
}

And Additional CSS in the Customizer will apply to the entire site. But that CSS rule will only apply to pages with a Right Sidebar.

If that don’t work, then please raise a new topic and share a link to your site so i can take a closer look

[Author]

Posts