Jump to content

Category menu to stay in place only on mobile device

Recommended Posts

Found this code to keep the category menu in place on mobile (it does what I hoped it would do), but it screws up the sidebar category placement on desktop. Want sidebar category menu on desktop.

/* Show category nav links */
div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
}
section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
}
.nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
li.category-item:first-child a {
    padding-bottom: 0 !important;
}

@media screen and (max-width:640px) {
div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
}

.products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
  padding-bottom:0px!important;
}

Link to comment
12 hours ago, sINK said:

(it does what I hoped it would do), but it screws up the sidebar category placement on desktop.

If you wrap the entire code in a media query it wont affect the desktop view:

@media only screen and (max-width:767px) {
  // Show category nav links 
  div.nested-category-tree-wrapper {
    display: flex !important;
    float: none !important;
    min-width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
  }
  section.products.collection-content-wrapper.products-list {
    flex-direction: column !important;
    display: flex;
  }
  .nested-category-tree-wrapper>ul {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
  }
  nav.nested-category-breadcrumb {
    display: none !important;
  }
  ul.nested-category-children {
    display: none !important;
  }
  li.category-item:first-child a {
    padding-bottom: 0 !important;
  }

  div.nested-category-tree-wrapper ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a {
    padding-bottom:0px!important;
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.