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

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! 

Site URL? It is not included in the body of your post.

10 hours ago, creedon said:

Site URL? It is not included in the body of your post.

Sorry about that! Knew I'd forget something lol. It's https://www.louiswesstudio.com/coming-soon

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.

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. 

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;
}

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...