Make drop down mobile utility bar visible on desktop

signofastruggle
Excursionist
17 0 4

Hello! I am looking to make a mobile drop down utility bar or filter bar visible for desktop users as well. It would be nice to have the bar visible at all times on top of the collections when the page loads, and then fixed to the top of the page while scrolling. This is for the symmetry theme.

 

Please let me know if you require additional information

Thank you very much!

 

https://bellarosa.jewelry/

 

Screenshot 2024-01-22 at 1.11.29 PM.jpg

 

Replies 2 (2)

Spac-es
Shopify Partner
302 90 114

You can add the following code to your main.css file. I've opted for a different layout; anchoring the filter options bar at the bottom instead of keeping it at the top. You can adjust the height by editing the percentage in 'top'. Hope that helps!

@media sreen and (max-width: 999px) {
  .utility-bar {
    position: fixed;
    z-index: 99;
    background-color: lightyellow;
    width: 93%;
    height: 8vh;
    top: 90%;
  }
}

Captura.PNG

 

signofastruggle
Excursionist
17 0 4

Thank you very much for your help with this. I would like the filter options bar to also be visible on desktop as it is seen on mobile. This was my initial request as the filters get lost when scrolling down the page on desktop, and making them stick with scroll does not allow you to see all the filters until you make it way down the page.

 

Can you help make the mobile filter option bar sticky on scroll on desktop? I updated to: (max-width: 1920px) from 999px but it still does not display.