alexlazarciuc Posted April 12, 2021 Share Posted April 12, 2021 (edited) 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 Edited April 12, 2021 by alexlazarciuc Link to comment
creedon Posted April 12, 2021 Share Posted April 12, 2021 @alexlazarciuc I'm not seeing what you show in the image. Did you solve the issue? alexlazarciuc 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
ampddesigns Posted April 15, 2021 Share Posted April 15, 2021 Hi @tuanphan So glad I stumbled upon this, thanks! Was there ever a fix for mobile? Here is the site: https://kazoo-grape-t92x.squarespace.com/shop Password: DailyMagicWholesale21 Also, is there a way to align "all products" with the rest of the items? Currently it is higher. Currently on screen resizes this is what I see: Link to comment
tuanphan Posted April 17, 2021 Share Posted April 17, 2021 On 4/16/2021 at 1:58 AM, ampddesigns said: Hi @tuanphan So glad I stumbled upon this, thanks! Was there ever a fix for mobile? Here is the site: https://kazoo-grape-t92x.squarespace.com/shop Password: DailyMagicWholesale21 Also, is there a way to align "all products" with the rest of the items? Currently it is higher. Currently on screen resizes this is what I see: Add to Design > Custom CSS @media screen and (max-width:767px) { div.nested-category-tree-wrapper ul { -ms-flex-wrap: wrap; flex-wrap: wrap; } } 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
ampddesigns Posted April 19, 2021 Share Posted April 19, 2021 On 4/17/2021 at 5:36 AM, tuanphan said: Add to Design > Custom CSS @media screen and (max-width:767px) { div.nested-category-tree-wrapper ul { -ms-flex-wrap: wrap; flex-wrap: wrap; } } Thank you so much! In case it's helpful, I also used this to bring "all" in alignment: .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a { padding-bottom:0px!important; } Link to comment
Guest Posted May 10, 2021 Share Posted May 10, 2021 (edited) On 4/19/2021 at 3:31 PM, ampddesigns said: Thank you so much! In case it's helpful, I also used this to bring "all" in alignment: .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a { padding-bottom:0px!important; } Really helpul all these answers, it all works fine (couple of hickups) Any help with the below would be great (i've used the code from tuanphan and ampddesigns ) Picture Below- How do I increase the space between the category bar and the products below? I want the bar to look like its on its own, rather than attached to the products. My other issue is this. When i use subcategories, the way it is displayed looks really awful. Is there anyway to make it look like a dropdown menu? Ideally I want all the categories to stay at the top on the same line, with the subcategories appearing below. The same happens on the mobile version too. And finally, how do I change the background color and text color? Many thanks in advance Edited May 10, 2021 by Luk_a1 Link to comment
alexlazarciuc Posted May 11, 2021 Share Posted May 11, 2021 On 4/12/2021 at 10:28 PM, creedon said: @alexlazarciuc I'm not seeing what you show in the image. Did you solve the issue? @creedon hey, sorry for late reply, the notifications email went into spam. The issue is still there, Navigate to the url -> click new collection -> you will see the list of those options will disappear Link to comment
tuanphan Posted May 13, 2021 Share Posted May 13, 2021 On 5/10/2021 at 3:04 PM, Luk_a1 said: Really helpul all these answers, it all works fine (couple of hickups) Any help with the below would be great (i've used the code from tuanphan and ampddesigns ) Picture Below- How do I increase the space between the category bar and the products below? I want the bar to look like its on its own, rather than attached to the products. My other issue is this. When i use subcategories, the way it is displayed looks really awful. Is there anyway to make it look like a dropdown menu? Ideally I want all the categories to stay at the top on the same line, with the subcategories appearing below. The same happens on the mobile version too. And finally, how do I change the background color and text color? Many thanks in advance Hi. 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
tuanphan Posted May 13, 2021 Share Posted May 13, 2021 On 5/11/2021 at 1:03 PM, alexlazarciuc said: @creedon hey, sorry for late reply, the notifications email went into spam. The issue is still there, Navigate to the url -> click new collection -> you will see the list of those options will disappear Add this new code 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; } 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; } 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
Guest Posted May 14, 2021 Share Posted May 14, 2021 (edited) On 5/13/2021 at 10:08 AM, tuanphan said: Hi. Can you share site url? We can check easier Thanks tuanphan https://www.oxmerch.com/ PW - Delta1 Edited May 14, 2021 by Luk_a1 Link to comment
sjcwallprints Posted September 19, 2021 Share Posted September 19, 2021 On 5/13/2021 at 5:11 PM, tuanphan said: Add this new code 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; } 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; } I applied this code into my site, but you can see on mobile that the categories go onto multiple lines when viewing on mobile. Is there anyway to fix this so it's all on one line and you can drag across the screen or some other option? https://stephenchowphotography.com/shop/taxis-trams Link to comment
tuanphan Posted September 22, 2021 Share Posted September 22, 2021 On 9/19/2021 at 11:47 AM, sjcwallprints said: I applied this code into my site, but you can see on mobile that the categories go onto multiple lines when viewing on mobile. Is there anyway to fix this so it's all on one line and you can drag across the screen or some other option? https://stephenchowphotography.com/shop/taxis-trams Hi, Don't remove above code. Add this to Design > Custom CSS /* Fix mobile category nav links */ @media screen and (max-width:767px) { .nested-category-tree-wrapper>ul { flex-wrap: wrap; } } 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
sjcwallprints Posted September 22, 2021 Share Posted September 22, 2021 Great - thank you. That works! Link to comment
Sam1010 Posted September 4, 2022 Share Posted September 4, 2022 @tuanphan This was all very helpful to show categories on all pages. However, the vertical line's that separated each category are now gone...is there a code to get those back? Link to comment
tuanphan Posted September 6, 2022 Share Posted September 6, 2022 On 9/4/2022 at 11:24 PM, Sam1010 said: @tuanphan This was all very helpful to show categories on all pages. However, the vertical line's that separated each category are now gone...is there a code to get those back? Yes. Possible. Can you share link to your site? We can adjust code for your case 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
Sam1010 Posted September 8, 2022 Share Posted September 8, 2022 @tuanphan https://fife-capybera-26sm.squarespace.com/config/ here is my site Link to comment
tuanphan Posted September 11, 2022 Share Posted September 11, 2022 On 9/9/2022 at 12:43 AM, Sam1010 said: @tuanphan https://fife-capybera-26sm.squarespace.com/config/ here is my site Your site is private. Can you setup an access password & share url again? 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
Sam1010 Posted September 13, 2022 Share Posted September 13, 2022 @tuanphan http://www.samgraingerart.com/ how about now? Also, can you help with changing the color of the left and right arrow boxes when selecting an image and there are multiple. Right now it shows solid white box with a grey arrow. I'm looking for it to be transparent box and with a grey arrow... Link to comment
tuanphan Posted September 19, 2022 Share Posted September 19, 2022 On 9/4/2022 at 11:24 PM, Sam1010 said: @tuanphan This was all very helpful to show categories on all pages. However, the vertical line's that separated each category are now gone...is there a code to get those back? Do you still need this? On 9/13/2022 at 8:34 AM, Sam1010 said: @tuanphan http://www.samgraingerart.com/ how about now? Also, can you help with changing the color of the left and right arrow boxes when selecting an image and there are multiple. Right now it shows solid white box with a grey arrow. I'm looking for it to be transparent box and with a grey arrow... I don't quite understand. Can you take a screenshot? 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
Sam1010 Posted September 20, 2022 Share Posted September 20, 2022 @tuanphanscreenshot below. You'll see the white boxes with arrows to go left and right. They are blocking part of the picture which I dont want. Link to comment
tuanphan Posted September 21, 2022 Share Posted September 21, 2022 19 hours ago, Sam1010 said: @tuanphanscreenshot below. You'll see the white boxes with arrows to go left and right. They are blocking part of the picture which I dont want. Add to Design > Custom CSS .pdp-carousel-controls.enabled>button { background-color: transparent !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
Sam1010 Posted September 21, 2022 Share Posted September 21, 2022 @tuanphanThat worked, thank you! However it is now hard to see the grey arrows. How can I make those white? Link to comment
tuanphan Posted September 24, 2022 Share Posted September 24, 2022 On 9/22/2022 at 1:21 AM, Sam1010 said: @tuanphanThat worked, thank you! However it is now hard to see the grey arrows. How can I make those white? I think you should change arrow icon + background, because if change arrow to white, I'm not sure it will be fine on other products. What do you think? 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
HometownHaunts Posted July 26, 2023 Share Posted July 26, 2023 On 4/17/2021 at 4:36 AM, tuanphan said: Add to Design > Custom CSS @media screen and (max-width:767px) { div.nested-category-tree-wrapper ul { -ms-flex-wrap: wrap; flex-wrap: wrap; } } This and the previous code worked perfectly, so thank you! Only thing I wonder is if there is a way to add something like a break between the categories. Something like a bullet point or a line. See picture below, they kind of look jumbled. Link is: www.thehometownhaunts.com Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment