Hide sidebar with product filters on mobile

This topic has 3 replies, 3 voices, and was last updated 7 years, 7 months ago ago by Max Mullins

  • Avatar: Mxmarcu
    Mxmarcu
    Participant
    May 18, 2017 at 20:51

    Hello,

    On product listings page is it possible to keep the sidebar with attribute filters hidden on only mobile devices and instead show the button “filters”.

    And on desktop the sidebar with attribute filters should always be visible and positioned to the left. (this is how it works for me now).

    Having the filters to always show on mobile makes the product listings very cluttered, it would be a better user experience to press a button to show the filters and vice versa on desktop.

    Thanks!

    Please, contact administrator
    for this information.
    2 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    May 19, 2017 at 10:25

    Hello,

    I’ve added some code in Theme Options > Custom css. Please check now.

    Regards,
    Rose Tyler.

    Avatar: maxmullins
    Max Mullins
    Participant
    May 19, 2017 at 10:32

    Hello @Mxmarcu,

    We will consider your point of veiw for our next theme updates.
    For now it can be solved via custom.css and theme settings.
    1)You may add all necessary filters you already have displayed on shop page in appearance->widgets->shop sidebar and enable hidden sidebar switcher in dasboard->theme options->product page layout.
    2)Select shop page layout with right sidebar enabled. like on screenshot http://prntscr.com/f9lxq4.
    Also please add following code into the custom.css in theme_options->custom.css to hide text on tablets and mobile phones:

    @media only screen and (min-width: 767px) {
       .archive  .filter-content{display:none!important}
    }}

    Regards,
    Max Mullins

  • Viewing 3 results - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.