Jump to content

How to Keep store navigation on category pages and not just main store page?

Recommended Posts

Site URL: https://impala-nectarine-4s9h.squarespace.com/config/design

Hi, 

 

I have created multiple stores within my site for different styles of product and then put categories within each store. When I go onto the main page of my store, there is a menu linking to all the different categories of products, but when you go onto the page of a category, the navigation to all the other categories dissappears, is it possible to keep this navigation on all category pages and not just the main store page?

Link to comment

So on that site you provided for example, if you click into a product section such as Turbines, you can navigate between "All" and "Turbine" on either page, but on my site, once you click a chosen category from the "All page", the navigation is lost if that makes any sense ?

Link to comment

Password1 is the password! If you go onto one of the subsections and navigate to each part of that specific store, you will be able to see that the navigation is lost and you would have to go back to the main store page to navigate to other sections. 

 

Thanks!

Link to comment

 

14 hours ago, Witn said:

So on that site you provided for example, if you click into a product section such as Turbines, you can navigate between "All" and "Turbine" on either page, but on my site, once you click a chosen category from the "All page", the navigation is lost if that makes any sense ?

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 11/19/2020 at 5:54 AM, tuanphan said:

 

Add to Home > Design > Custom CSS


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

 

I am very interested in this also. I have four store pages, I call them "Collections:" they all have unique products listed which are different in design to the other pages or "Collections:" the issue I am having is that when you are on one store "Collection: Attack-the-Block" for example. There is no navigation in the side bar to access the other store pages "Collection: Park Brewing". I Have created images at the bottom of the page, and top of the page previously to provide links to access the other store pages "collections:" and all the store pages are accessible in the drop down menu in the navigation.

I would like the store pages to be included above my categories in the side navigation. so that it would be structured like this. 

The active Collection page would have to be bold. It would be ideal to have the categories in a drop down menu from the collection pages. But not necessary. I would just like to have all the store pages be accessible from every page in the side bar. And always remain in the order as above. 
 
 
access: "password"

 

Link to comment
On 11/19/2020 at 5:54 AM, tuanphan said:

 

Add to Home > Design > Custom CSS


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

 

How to do you nest this above the products on mobile. So that the nested categories don't push the products over to the right. but rather come before the products in order and nest above. 

 

store page: https://www.parkbrewing.company/products-attack-the-block

access: "password"

 

 

Link to comment
Just now, Park_Brewing_Company said:

How to do you nest this above the products on mobile. So that the nested categories don't push the products over to the right. but rather come before the products in order and nest above. 

 

store page: https://www.parkbrewing.company/products-attack-the-block

access: "password"

 

 

NVM mind, changed float to inherit in this code.

.nested-category-tree-wrapper {
    display: flex !important;
}
.products.collection-content-wrapper .nested-category-tree-wrapper {
    float: inherit;
    min-width: 220px;
    max-width: 300px;
    margin-right: 40px;
      margin-bottom: 15px;
}

Link to comment

Hi there, 

I’m also having this problem. Wondering if anybody can help 🙃

@tuanphan the suggested code is working. However it displays as a side bar.

@Park_Brewing_Company this update also works but the display is stacked to the top.

I’d like to keep the styling of the category title, just have them appear at the top of each category page. 

Thanks in advance   ✌️

 

Edited by CASKATE
Link to comment
34 minutes ago, CASKATE said:

Hi there, 

I’m also having this problem. Wondering if anybody can help 🙃

@tuanphan the suggested code is working. However it displays as a side bar.

@Park_Brewing_Company this update also works but the display is stacked to the top.

I’d like to keep the styling of the category title, just have them appear at the top of each category page. 

Thanks in advance   ✌️

 

This sets it to the top for mobile only. this is what I have. sorry, never copied this part of the code.

 

@media screen and (max-width: 640px) {

.tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {

    display: none !important;

  } }

 

.products.collection-content-wrapper .nested-category-tree-wrapper>ul {

    display: none !important;

}

 

Link to comment

redirects me to this url, https://viola-seahorse-l65k.squarespace.com/config/?frameUrl=%2Fshop

not sure what the issue is, but the code I posted will nest the sidebar on mobile, and you can get it to position at top only on mobile. 

 

this is the full code and how I have mine structured.

 

//NEST-CATEGORY-MOBILE-HIDE-CATEGORY///
@media screen and (max-width: 640px) {
.tweak-products-nested-category-type-sidebar .products.collection-content-wrapper .nested-category-children {
    display: none !important;
  } }
  
.nested-category-tree-wrapper {
    display: flex !important;
}
@media screen and (max-width: 640px) {
.products.collection-content-wrapper .nested-category-tree-wrapper {
    float: inherit;
    min-width: 220px;
    max-width: 300px;
      margin-top: 30px;  
     margin-right: 40px;
      margin-bottom: 15px;
  } }

.products.collection-content-wrapper .nested-category-tree-wrapper { 
     margin-right: 20px;
  }
 

Link to comment

Yes styling is set up etc. 

My issue is the categories just display on the main shop page. I’d like for these category titles to display on all of the category pages like a sub nav I guess. 

This code by @tuanphan does that, but it displays to the left side. 

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

 

 

Edited by CASKATE
Link to comment
On 11/23/2020 at 1:31 AM, CASKATE said:

Yes styling is set up etc. 

My issue is the categories just display on the main shop page. I’d like for these category titles to display on all of the category pages like a sub nav I guess. 

This code by @tuanphan does that, but it displays to the left side. 


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

 

 

Can you share site url?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Add to Home > Design > Custom CSS

.nested-category-tree-wrapper {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
}
section.products.collection-content-wrapper.products-list {
    display: flex;
    flex-direction: column;
}
.products.collection-content-wrapper .nested-category-tree-wrapper>ul {
    display: flex;
    justify-content: space-between;
    width: 50%;
    margin: 0 auto;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

I have the same problem: need the whole list of categories to appear on category pages not just the main shop page. Despite copying the CSS code nothing seems to have changed?

Website is: https://www.theartisanstudio.uk/onlineshop

Category page example: https://www.theartisanstudio.uk/onlineshop/bags-non-leather

Instead of:

All Products /

Bags non-leather

I would like to display the enclosed partial screenshot (like the main shop page).

 

Screenshot 2020-12-07 at 15.12.04.png

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.