Hide sidebar on desktop but keep it in mobile

[Fletsch]

Hi there

I would like to hide the sidebar in the desktop view, because I have defined the filters as HTML block and they are displayed horizontally there. However, if I change the sidebar to “1 column” in the theme settings under Product Archive, then the icon for the filters also disappears on tablet and mobile to open the sidebar there. How can I make this work?

– No sidebar on desktop, because I have positioned the filters there horizontally above the product archive
– Using the filters as sidebar on mobile and tablet

I have tried several settings, but can’t come up with the solution.

Thanks in advance for your help.

Best regards

• This topic was modified 2 years, 1 month ago by Fletsch.

Hello,

We would suggest you hidden sidebar for the desktop: https://woodmart.xtemos.com/shop/?opt=hidden_sidebar

You can hide the icon on the desktop:

body.offcanvas-sidebar-desktop .shop-content-area:not(.col-lg-12) .wd-show-sidebar-btn {
    display: none;
}

You can configure the hidden sidebar in the Theme Settings > Product Archives > Sidebars.

If you have any questions please feel free to contact us.

Best Regards

Hi Elise

Thanks for your answer. Is there maybe better option? I also tought about what you’re suggesting with hidden sidebar on desktop and hide the icon via css, but unfortunatelly the filter block then looks different and takes more space (1 line more). I definitely like the normal look more with off-canvas sidebar OFF.

See screenshots: 1. with off-canvas sidebar on desktop OFF, 2. with off-canvas sidebar on desktop ON.

Attachments:

You must be logged in to view attached files.

[Fletsch]

Ok I made it work with the following CSS:

@media (min-width: 1025px){
.site-content.col-lg-10 {
  flex: 0 0 100%;
  max-width: 100%;
}
.sidebar-container {
  display: none;
}
}

But it’s of course not a fine solution. Would be great if you could integrate that scenario with hidden sidebar on desktop into the theme configuration. I’m sure that I’m not the only one who tries to make that work.

Best regards

• This reply was modified 2 years, 1 month ago by Fletsch.

Hello,

You can insert your code in the Theme Settings > Custom CSS > Mobile, in this case, you do not need a media query.

You can use Theme presets, to hide /show any settings depending on the device width: https://xtemos.com/docs-topic/theme-settings-presets/

If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts