Jump to content

Moving Categories on Mobile

Recommended Posts

  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Hi there! It is possible wit

The following code snippet, however as you can tell by the picture, I wouldn't recommend having them in the sidebar on mobile devices - it looks like it takes up a lot of the screen, which isn't very mobile-friendly. If you want to have the categories display vertically (but not in the sidebar), use the second code snippet (see second picture).

Hope this helps!

  /* Category in sidebar on mobile devices */
  @media(max-width: 768px) {
    .nested-category-children {
      display: none !important;
    }

    .nested-category-tree-wrapper {
      display: initial !important;
    }
  }

 

/* Categories display vertically, not in sidebar */ 
@media(max-width: 768px) {
    .nested-category-children {
      flex-direction: column !important;
    }

    .products.collection-content-wrapper .nested-category-breadcrumb-list-item .nested-category-breadcrumb-link {
      margin: 0 !important;
    }
  }

 

Screenshot_76.png

Screenshot_77.png

Edited by Caroline_Smith

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.