Home › Forums › WoodMart support forum › Hide sidebar on desktop but keep it in mobile

Hide sidebar on desktop but keep it in mobile

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • January 27, 2023 at 5:47 pm #438348

    Fletsch
    Participant

    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.
    January 28, 2023 at 4:11 am #438467

    Elise Noromit
    Member

    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

    January 28, 2023 at 5:06 pm #438573

    Fletsch
    Participant

    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.
    January 29, 2023 at 12:03 am #438614

    Fletsch
    Participant

    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.
    January 30, 2023 at 1:01 am #438787

    Elise Noromit
    Member

    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
Viewing 5 posts - 1 through 5 (of 5 total)