Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

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

 

new website screenshot.png

Link to comment
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/

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

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?

Link to comment

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!

 

new website screenshot.png

Link to comment

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

 

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

image.thumb.png.52c503eb35bfe1661b77cf2f9250b1f1.png

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

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

 

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
  • 2 weeks later...
  • 3 months later...

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. 

 underline.thumb.png.759e12566a76656d13b5c628b11e3478.png

Link to comment

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?

 

image.thumb.png.851dd62b10f2d2fbab5e618ab993cebb.png

Link to comment
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. 

 underline.thumb.png.759e12566a76656d13b5c628b11e3478.png

Can you share site url? We can check easier

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

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!

Link to comment
  • Solution
On 12/16/2023 at 2:42 AM, marbleandmilkweed said:

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!

It still works, but your header is overlap sticky category links bar. Add this code to Custom CSS to fix it

div.nested-category-tree-wrapper {
    top: 180px;
}

 

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

image.thumb.png.fed3e0ef374ce697b2885fdc60567d49.png

Edited by tuanphan

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
  • 1 month later...

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!

IMG_0717.jpg

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.