Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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


Witn

Recommended Posts

9 hours ago, TheArtisanStudio said:

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

Try adding to Custom CSS

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

 

Link to post
  • Replies 44
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

Can you share site url?

You can add a Text Block in Footer >> Add text links >> Then we can give the code to move it on the top of product page.

Add to Last Line in Code Injection Footer <script> $(document).ready(function() { $('div#block-3994033c75bb9362abb4').insertBefore('.ProductItem'); }); </script>  

Posted Images

9 hours ago, TheArtisanStudio said:

Thank you for your reply. Unfortunately Squarespace is saying that there's a syntax error in the second line of your code above: "


div.nested-category-tree-wrapper {

Can you take screenshot all code in Custom CSS?

Link to post

Can you paste all current code in Custom CSS? We can check easier.

Writing missing or missing a dot can also lead to syntax error.

Link to post
  • 4 weeks later...
On 1/15/2021 at 7:21 AM, galangster said:

Hi! Could someone help me with this as well? Our website: https://www.enjoysnacks.com/shop has the navigation categories on the side (which we like). On product pages like this one: https://www.enjoysnacks.com/shop/p/giftpacks/enjoy-gift-pack, we would like the category navigation on the top of each product page. Is there anyway to do this? Any help would be greatly appreciated! Thanks!

You can add a Text Block in Footer >> Add text links >> Then we can give the code to move it on the top of product page.

Link to post
On 1/15/2021 at 8:22 PM, tuanphan said:

You can add a Text Block in Footer >> Add text links >> Then we can give the code to move it on the top of product page.

I added the text links to the footer!

Link to post
On 1/15/2021 at 8:22 PM, tuanphan said:

You can add a Text Block in Footer >> Add text links >> Then we can give the code to move it on the top of product page.

Let me know if there is anything else I need to do! Thanks! 🙂

Link to post
1 hour ago, galangster said:

Let me know if there is anything else I need to do! Thanks! 🙂

Add to Last Line in Code Injection Footer

<script>
  $(document).ready(function() { 
		$('div#block-3994033c75bb9362abb4').insertBefore('.ProductItem');
	});
</script>

 

Link to post
21 hours ago, tuanphan said:

Add to Last Line in Code Injection Footer


<script>
  $(document).ready(function() { 
		$('div#block-3994033c75bb9362abb4').insertBefore('.ProductItem');
	});
</script>

 

It worked perfectly, thank you so much! @tuanphan

Link to post
On 12/8/2020 at 12:48 AM, tuanphan said:

Try adding to Custom CSS


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

 

Hi! I added this to my custom css, it has worked but there are formatting issues.

This is my main store page without the code:

1718497666_Screenshot2021-01-29at10_23_09.thumb.png.bcfa771910e581a7e6d96cf436e628e9.png

 

Main store page with the code:

215695270_Screenshot2021-01-29at10_27_07.thumb.png.eb79a5f812ae6bf4a95407f17bfb4e7a.png

 

category page with the code: 

1350803845_Screenshot2021-01-29at10_26_55.thumb.png.786a19a58f5eaa0f2008317c88012179.png

 

I like the original look, with lines under the navigation and in-between each individual category. Now the main store page has no lines at all, and on the category pages the navigation is under the line. Is there a way to maintain the original formatting? 

Link to post
On 1/29/2021 at 3:34 AM, Environmental-Tea-48 said:

Hi! I added this to my custom css, it has worked but there are formatting issues.

This is my main store page without the code:

1718497666_Screenshot2021-01-29at10_23_09.thumb.png.bcfa771910e581a7e6d96cf436e628e9.png

 

Main store page with the code:

215695270_Screenshot2021-01-29at10_27_07.thumb.png.eb79a5f812ae6bf4a95407f17bfb4e7a.png

 

category page with the code: 

1350803845_Screenshot2021-01-29at10_26_55.thumb.png.786a19a58f5eaa0f2008317c88012179.png

 

I like the original look, with lines under the navigation and in-between each individual category. Now the main store page has no lines at all, and on the category pages the navigation is under the line. Is there a way to maintain the original formatting? 

try remove this code

nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
Link to post
  • 1 month later...

Hi @tuanphan

I have a similar issue. For some reason on mobile, once I click a category, for example, art prints, the category navigation disappears. Is there to a way to make sure the category menu remains on all shop pages ON MOBILE. Web version seems to work fine. Can you help?

Website is shanoncamillearts.com

Link to post
  • 4 weeks later...
On 4/12/2021 at 6:15 PM, alexlazarciuc said:

Hey Guys,

I have the same issue, can someone help please?

My website is: https://www.fluffyheartsbandanas.com/

You can see the padding is not correct with new releases and the rest of nav items.

Can you advise? Thanks

Alex

Screenshot 2021-04-12 121157.png

Hi. Do you still need help?

Link to post
  • 4 weeks later...
On 12/7/2020 at 7:48 PM, tuanphan said:

Try adding to Custom CSS


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

 

Hi ! I used your code and it's working on desktop very well,  but it doesn't seems to be working on mobile for my website.

Here's a picture of what the code does to my menu. I also attached a picture of what I used to have, but I wish to have the directory on all category's page.

A couple weeks ago, I also added a code to have a nested menu on mobile so maybe it's interfering with yours ? I tried removing it, but then the menu is on one line, and I don't like it this way. It's not very user friendly.

I hope I'm making sense. Thank you for your help !

Here's my shop link : https://www.sarahlalune.com/boutique-2 

 

 

Screenshot_20210511-181909.png

Screenshot_20210511-182032.png

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...