Return to previous page

Move Filter button on the top only for mobile mode

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

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

#226763 Copied Theme version: 6.2.5 WooCommerce version: 3.8

6 Answers
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
#226768 Copied
Eduard

Participant

December 13, 2019 at 18:23

thank you very much

#226771 Copied

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

#226773 Copied
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
#226796 Copied
Eduard

Participant

December 14, 2019 at 17:40

super and for tablet???

#226827 Copied

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

#226829 Copied
Viewing 7 results - 1 through 7 (of 7 total)