Move Filter button on the top only for mobile mode

This topic has 7 replies, 3 voices, and was last updated 4 years, 5 months ago ago by Rose Tyler

  • Avatar: Eduard
    Eduard
    Participant
    December 13, 2019 at 17:40

    Move Filter button on the top only for mobile mode
    can you help me please move the filter button from the shop page to the top of the page
    Thank you very much
    https://prnt.sc/qag5gy

    6 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 13, 2019 at 18:13

    Hello,

    Add the following code to Custom CSS or child theme style.css

    @media only screen and (max-width:480px){
        .open-filters-btn {
            position: fixed;
            right: 0;
            top: 120px;
            background-color: #fff;
            z-index: 9;
            padding: 5px;
        }
    
        .open-filters-btn a i {
            left: 5px;
        }
    }

    Regards

    Avatar: Eduard
    Eduard
    Participant
    December 13, 2019 at 18:23

    thank you very much

    Avatar: Eduard
    Eduard
    Participant
    December 13, 2019 at 18:57

    but when i put the code the filter when i scroll down it moving with me, not remain fixed there!!!
    https://prnt.sc/qah8ln

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 14, 2019 at 09:49

    Hello,

    Please use the next code:

    @media only screen and (max-width:480px){
        .open-filters-btn {
            position: absolute;
            right: -20px;
            top: -250px;
            background-color: #fff;
            z-index: 9;
            padding: 5px;
        }
    }

    Regards

    Avatar: Eduard
    Eduard
    Participant
    December 14, 2019 at 17:40

    super and for tablet???

    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    December 14, 2019 at 17:49

    Hello,

    Please read about media query – https://www.w3schools.com/css/css_rwd_mediaqueries.asp
    You asked about mobile, so we set 480px in the code, you can change it to 768px or 992px.

    Regards

  • Viewing 7 results - 1 through 7 (of 7 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.