modifying a sticky product category top bar to show on every shop page + stack on mobile

Hi there! I'm using a Ghost plugin to make a sticky top bar for my shop product categories on my new 7.1 site and I've changed the styling easily, but I would like the sticky top bar to show up on every shop page, not just on the "all" page. And would also like the categories to stack on mobile and remain sticky as on desktop. Just having trouble getting all of these things to work together. Here is the CSS I'm starting with:

// Product Cagetory Top Bar Style //

.products.collection-content-wrapper .nested-category-children {
  background: #FFFFFF;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0px;
  padding: 30px;
  font-size: 16px;
  font-family: 'Baskervillelightitalic';
}

Hi,

What is shop page url?

Thank you so much for your reply! URL is https://watermelon-robin-p7re.squarespace.com/, not sure how to give you access to view the site, since it is still in trial mode. Perhaps you can advise. Many thanks!

12 hours ago, marbleandmilkweed said:

Thank you so much for your reply! URL is https://watermelon-robin-p7re.squarespace.com/, not sure how to give you access to view the site, since it is still in trial mode. Perhaps you can advise. Many thanks!

Your site is private. You can setup an access password, we can access your site easier

https://forum.squarespace.com/topic/216243-how-to-setup-password-share-site-url/

Hi there! I'm trying to do this, but when I try to set a new password, it reverts to some other password when I hit save. I have no idea what the other password is because it just shows up as dots there. It may be due to my saved password keychain settings? I have no idea. Apologies. Is there another way to show you the site?

I think I managed to reset it! PW should be newsite2023, thanks so much for your patience!

You mean on other pages, sticky this All/ text?

I'm hoping to have the shop categories menu show and be sticky at the top of all the product category pages, currently when you click on a product category, it only offers that "All" option you mention above at the top to return to the main shop page. Would like people to be able to navigate between product categories without returning to "All", if that makes sense? So the product category menu in the photo below should show and be sticky and also stack on mobile so there is no horizontal scrolling. Hoping this isn't too many variables! Many thanks again in advance for your help!

Try adding to Design > 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;
    position: sticky;
    position: -webkit-sticky;
    top: 0;
    z-index: 9999;
}

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;
    flex-wrap: wrap !important;
}

.nested-category-tree-wrapper>ul li {
    margin-left: 2vw;
}

nav.nested-category-breadcrumb {
    display: none !important;
}

ul.nested-category-children {
    display: none !important;
}

a.category-link.root {
    padding-bottom: 0 !important;
    padding-top: 6px !important;
}

/* fix first item space */
li.category-item:first-child a {
    padding-bottom: 0 !important;
}

Yes, this is nearly the thing, thank you! The only little tweak is that everything seems to be just a touch too far to the right on both desktop and mobile view. What should I edit to bring it all back into the center? Truly so grateful for your help!

17 hours ago, marbleandmilkweed said:

Yes, this is nearly the thing, thank you! The only little tweak is that everything seems to be just a touch too far to the right on both desktop and mobile view. What should I edit to bring it all back into the center? Truly so grateful for your help!

It looks fine to me

It's still a bit over to the right on both desktop and mobile, curious to know if it's possible to adjust something above to move it back into the center? Many thanks again!

Try adding this code under

.products.collection-content-wrapper .nested-category-tree-wrapper li:first-child {
    margin-left: 0 !important;
}
@media screen and (max-width:767px) {
.tweak-products-nested-category-type-top .products.collection-content-wrapper .nested-category-tree-wrapper {
    justify-content: center !important;
    align-items: center !important;
    padding-left: 0 !important;
}

.tweak-products-nested-category-type-top .products.collection-content-wrapper .nested-category-tree-wrapper>ul {
    width: 100% !important;
}
}

This fixed the whole thing entirely, thank you again so much! Truly grateful for your kind help!

Hello @tuanphan - I was also having the same issue and have used your code and it works great! However would you be able to help modify the code to change the text when you're viewing the category from BOLD to be UNDERLINED (like the main nav) so it matches the rest of the site. 

Thanks so much. 

Also, all categories are showing once you click into a CATEGORY, however would also love to have all the categories showing whilst on a PRODUCT page (It seems to just show only breadcrumb atm). Would you have a code to show this on product pages too?

On 12/11/2023 at 3:57 PM, tokyn said:

Hello @tuanphan - I was also having the same issue and have used your code and it works great! However would you be able to help modify the code to change the text when you're viewing the category from BOLD to be UNDERLINED (like the main nav) so it matches the rest of the site. 

Thanks so much. 

 

Can you share site url? We can check easier

Hello again! So the code above worked for several months and the recently stopped working, my category navigation is no longer sticky. I didn't change anything else, so I'm trying to figure out what happened. Has Squarespace changed something about category headers since I originally put this code in? Thanks, as always, for your help!

On 12/13/2023 at 1:12 PM, tuanphan said:

Can you share site url? We can check easier

https://www.tokyn.com.au/shop/
pass: 000!

18 minutes ago, tokyn said:

https://www.tokyn.com.au/shop/
pass: 000!

Something like this (just some random text to show my idea)?

Perfect, thank you again so much. This seems to have worked!

On 12/23/2023 at 2:22 AM, marbleandmilkweed said:

Perfect, thank you again so much. This seems to have worked!

Add to Website Tools (under Not Linked) > Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function() { 
		$('<ul class="tp-ul"><li><a href="https://www.tokyn.com.au/shop/tops">Top</a></li><li><a href="https://www.tokyn.com.au/shop/dresses-and-jumpsuits">Dresses and Jumpsuits</a></li><li><a href="https://www.tokyn.com.au/shop/bottoms">Bottoms</a></li><li><a href="https://www.tokyn.com.au/shop/knitwear">Knitwear</a></li><li><a href="https://www.tokyn.com.au/shop/outerwear">Outerwear</a></li><li><a href="https://www.tokyn.com.au/shop/accessories">Accessories</a></li><li><a href="https://www.tokyn.com.au/shop/gift-cards">Giftcards</a></li></ul>').insertBefore('nav.ProductItem-nav');
	});
</script>
<style>
  ul.tp-ul {
    list-style: none;
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

ul.tp-ul li {
    margin-right: 1vw;
    margin-left: 1vw;
    padding: 10px;
}
</style>

Well, I'm back! Sorry to continue needing so much help on this, but after viewing my site on a different mobile device and different laptop, I am realizing that there is a space (see the circled part of the image I've attached here) between the sticky product category bar and the header of my site. Wondering if there is a way to edit all this to make the positioning of the sticky product category bar relative to the header, i.e. always just below it, instead of having a gap there due to entering a number of pixels of padding that doesn't work for every display. Hoping you might be able to help! Many thanks!

Add this to Custom CSS box

div.nested-category-tree-wrapper {
    top: unset !important;
    padding: 0 !important;
}