Jump to content

Would like Category Menu to stay in place through out entire store

Recommended Posts

Password: hello

I'm having a super inconsistent category menu. I want it to always be in the same spot with the same style on mobile and desktop while in categories and products. Right now the style changes, it disappears on products and in mobile it disappears when you enter a category. I've tried googling and using different code snippets but they all seem to fix one aspect and break another. Would be amazing if there's a code that can just make the category menu stick in place no matter where you are on the shop, mobile and desktop included. This would also be a great fix for Squarespace in the future, it seems there's many people who want this. 

 

Thanks so much! 

Link to comment

I just wanted to see what you are seeing before I commented. I already had an idea what you are seeing.

The behaviour you are seeing is how SS designed the categories menu to work. On desktop, on the list pages, you have two options side or top. On mobile you only get top, because of the limited screen size. On the detail page you get no categories menu. You get the "breadcrumb".

You could choose the top layout setting for categories and that would make the experience a little more consistent.

It might be possible with custom code to create a categories menu experience you describe but it would not be an easy project. The main problem I see would be how to integrate the menu into detail pages that weren't designed for that element to be there. Also SS doesn't expose all categories on the product detail page so that would have to be built from scratch with is not easy on it's own.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
3 hours ago, creedon said:

I just wanted to see what you are seeing before I commented. I already had an idea what you are seeing.

The behaviour you are seeing is how SS designed the categories menu to work. On desktop, on the list pages, you have two options side or top. On mobile you only get top, because of the limited screen size. On the detail page you get no categories menu. You get the "breadcrumb".

You could choose the top layout setting for categories and that would make the experience a little more consistent.

It might be possible with custom code to create a categories menu experience you describe but it would not be an easy project. The main problem I see would be how to integrate the menu into detail pages that weren't designed for that element to be there. Also SS doesn't expose all categories on the product detail page so that would have to be built from scratch with is not easy on it's own.

Ah ok, thanks for the insights! I see what you mean. Would you happen to know if there's a way to at least keep up the top categories menu when changing between categories? If I use a side menu for categories they will stay in place while switching categories but when on mobile the top menu disappears after you click anything in the categories menu. 

Link to comment

I did some searching in these forums and was able to figure out a way to keep the category menu up in case anyone else comes looking for it. This is a combination of a few codes that were recommended here to others. 

 

/* 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:767px) {
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
  • 3 months later...

This is perfect, LouieLouie!

I was trying to cobble exactly this from a bunch of 2020 posts. Thank you so much for this!

Now I just have to tweak it so the category menu stays centered...

Edited by NEC
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.