tuanphan Posted July 27, 2023 Share Posted July 27, 2023 8 hours ago, HometownHaunts said: 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 Add to Design > Custom CSS /* shop categories */ a.category-link.root.active { padding-bottom: 0px !important; } @media screen and (max-width:767px) { li.category-item:not(:last-child)>a:after { content: "/"; padding-left: 10px; }} HometownHaunts 1 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 27, 2023 Share Posted July 27, 2023 11 hours ago, tuanphan said: Add to Design > Custom CSS /* shop categories */ a.category-link.root.active { padding-bottom: 0px !important; } @media screen and (max-width:767px) { li.category-item:not(:last-child)>a:after { content: "/"; padding-left: 10px; }} PERFECT! Thank you so much! I'm finally happy with how my site looks1 Link to comment
pasWI Posted September 23, 2023 Share Posted September 23, 2023 (edited) @tuanphan Hi! Thanks for providing all of this awesome code. I'm wondering how I get the navigation to move above the gray line? Additionally, how can I add a gray line to the store page, to match the look of the category pages? Edited September 23, 2023 by pasWI Link to comment
tuanphan Posted September 25, 2023 Share Posted September 25, 2023 On 9/23/2023 at 8:56 AM, pasWI said: @tuanphan Hi! Thanks for providing all of this awesome code. I'm wondering how I get the navigation to move above the gray line? Additionally, how can I add a gray line to the store page, to match the look of the category pages? Hi, Can you provide store page url? We can give code to add new underline between 2 lines 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
pasWI Posted September 30, 2023 Share Posted September 30, 2023 On 9/25/2023 at 6:02 AM, tuanphan said: Hi, Can you provide store page url? We can give code to add new underline between 2 lines Thanks! I missed your reply. My website is still on private so here is the link and PW: https://www.crescentmoonacres.com/ Help!Code930 Link to comment
pasWI Posted September 30, 2023 Share Posted September 30, 2023 On 9/25/2023 at 6:02 AM, tuanphan said: Hi, Can you provide store page url? We can give code to add new underline between 2 lines A few more issues I've discovered, while you are taking a look! I so appreciate your help! I've been experimenting, but can't seem to resolve these: 1. "Store" not centered on mobile, but is centered for category titles (see screenshots). I also notice the word "All" is higher than the other categories on the "Store" page (both on mobile and desktop). 2. The "|" category separation isn't showing up on desktop, but is showing up on mobile Any thoughts on these? Link to comment
tuanphan Posted October 3, 2023 Share Posted October 3, 2023 On 10/1/2023 at 3:51 AM, pasWI said: A few more issues I've discovered, while you are taking a look! I so appreciate your help! I've been experimenting, but can't seem to resolve these: 1. "Store" not centered on mobile, but is centered for category titles (see screenshots). I also notice the word "All" is higher than the other categories on the "Store" page (both on mobile and desktop). 2. The "|" category separation isn't showing up on desktop, but is showing up on mobile Any thoughts on these? Use this CSS code to fix both a.category-link.root.active { padding: 0 !important; } li.category-item:not(:last-child)>a:after { visibility: hidden; } With line, you mean this? 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
pasWI Posted October 3, 2023 Share Posted October 3, 2023 9 hours ago, tuanphan said: Use this CSS code to fix both a.category-link.root.active { padding: 0 !important; } li.category-item:not(:last-child)>a:after { visibility: hidden; } With line, you mean this? Unfortunately that didn't resolve the issues! Link to comment
AirleaEvary Posted November 7, 2023 Share Posted November 7, 2023 Hello! thanks so much for all this code help! I was able to get the categories to show up like I wanted but now my issue is - my custom CSS for the font is no longer working. Can something be added to change the font to the one I have uploaded?? Link to comment
AirleaEvary Posted November 7, 2023 Share Posted November 7, 2023 Also, is it possible to chang ethe word "all" to "all products" www.thejanimalstore.com password Artist2023 Link to comment
AirleaEvary Posted November 7, 2023 Share Posted November 7, 2023 On 7/26/2023 at 10:50 PM, tuanphan said: Add to Design > Custom CSS /* shop categories */ a.category-link.root.active { padding-bottom: 0px !important; } @media screen and (max-width:767px) { li.category-item:not(:last-child)>a:after { content: "/"; padding-left: 10px; }} I tried this and it didn't do anything. Is there a different code that may work? Link to comment
AirleaEvary Posted November 7, 2023 Share Posted November 7, 2023 here is my current code, all of it, in case that helps @font-face { font-family: MrsEavesOT-Roman; src: url(https://static1.squarespace.com/static/653179a612ce1861e9799328/t/65391b8959d0ce054f25e339/1698241417295/MrsEavesOT-Roman.otf); } h1 {font-family: MrsEavesOT-Roman;} h2 {font-family: MrsEavesOT-Roman;} h3 {font-family: MrsEavesOT-Roman;} h4 {font-family: MrsEavesOT-Roman;} p {font-family: MrsEavesOT-Roman;} .header-title a { font-family: 'FontTitleHere' !important; } .header-nav-item a { font-family: MrsEavesOT-Roman !important; } time.summary-metadata-item.summary-metadata-item--date { font-family: MrsEavesOT-Roman !important; } a.summary-title-link { font-family: MrsEavesOT-Roman !important; } a.summary-read-more-link { font-family: MrsEavesOT-Roman !important; } .sqs-add-to-cart-button-inner { font-family: MrsEavesOT-Roman ; } .header--menu-open a {font-family: MrsEavesOT-Roman} .collection-type-products .grid-title, .collection-content-wrapper .grid-prices, .collection-content-wrapper .grid-meta-status { font-family: MrsEavesOT-Roman !important; } .blog-basic-grid .blog-title {font-family:MrsEavesOT-Roman;} .item-pagination-link .item-pagination-title {font-family: MrsEavesOT-Roman;} .blog-item-title h1.entry-title { font-family: MrsEavesOT-Roman !important; } #siteWrapper.site-wrapper .sqs-block-button-element, .sqs-button-element { font-family: MrsEavesOT-Roman !important; } a.nested-category-breadcrumb-link { font-family: MrsEavesOT-Roman !important; } /* Product Detail - Description */ section.product-details.ProductItem-details * { font-family: MrsEavesOT-Roman !important; } .collection-type-products .ProductItem-details .product-price, .ProductItem-nav-breadcrumb, body:not( .button-style-default ) .sqs-add-to-cart-button, .nested-category-children { font-family : MrsEavesOT-Roman; } .newsletter-block .newsletter-form-header-title { font-family: MrsEavesOT-Roman !important; } /* Cart page custom font */ div#sqs-cart-container * { font-family: MrsEavesOT-Roman ,alternative-web-safe-font !important; } /* Promotional popup custom font */ .sqs-popup-overlay-content * { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Description // .newsletter-block .newsletter-form-header-description p { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Fields // .newsletter-block .newsletter-form-field-element { font-family: MrsEavesOT-Roman !important; } // Newsletter Form Button // .newsletter-block .newsletter-form-button { font-family: MrsEavesOT-Roman !important; } .variant-option * { font-family: MrsEavesOT-Roman !important; } // For the Form .sqs-block-form .field-list .title, .sqs-block-form .field-list .caption, .form-wrapper .field-list .field .field-element, .sqs-block-form .field-list select, .form-wrapper .field-list textarea, body:not(.button-style-default) .sqs-block-form .sqs-editable-button { font-family: MrsEavesOT-Roman !important; } .form-wrapper .field-list .field .caption { font-family: MrsEavesOT-Roman; font-size: 9px; color: white; letter-spacing: .15em; text-transform: none; } .sqs-block-button-element { box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); -webkit-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); -moz-box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75); } .sqs-add-to-cart-button, .sqs-editable-button, .sqs-editable-button-style, .sqs-button-element--primary { box-shadow: 10px 10px 5px 0px rgba(158,154,154,.75); } /* change the variant button style */ .variant-option .sqs-button-element--secondary { background:#F0A166!important; /* change the button background color */ border: 2px solid #EF8345!important; /* change the button border */ font-size: 1.2rem!important;/* change the button font size */ text-transform: uppercase;/* change the button character style */ } /* change the button on a hover */ .variant-option .sqs-button-element--secondary:hover { background:#4E7C72!important; /* change the button background color */ color: #EF8345!important; /* change the font color */ box-shadow: 10px 10px 5px 0px rgba(158,154,154,0.75) /* give the button a shadow */ } /* change the selected button style */ .ProductItem-details .variant-radiobtn-wrapper input[type="radio"]:checked+label { background: #4E7C72 !important;/* change the button background color */ color: #F0A166 !important;/* change the button font color */ border: 1px solid black !important; /* change the button border */ border-radius: 8rem !important; /* change the button shape */ } /* 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; } .products.collection-content-wrapper .nested-category-tree-wrapper>ul>li:first-child a { padding-bottom:0px!important; } Link to comment
tuanphan Posted November 10, 2023 Share Posted November 10, 2023 On 11/7/2023 at 9:30 PM, AirleaEvary said: Also, is it possible to chang ethe word "all" to "all products" www.thejanimalstore.com password Artist2023 Use this CSS code a.category-link.root.active { visibility: hidden; } a.category-link.root.active:after { visibility: visible; content: "All products"; } 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
Emmalou025 Posted November 15, 2023 Share Posted November 15, 2023 Hi, sorry jumping on this thread - could someone help me with my categories? On each page i would like to have all categories showing on the top but also my subcategories if that makes sense (like on page "Christmas Shop" & "Soother Clips" website is www.mylittlegalwaystore.ie Link to comment
Paul_Wille Posted July 3 Share Posted July 3 Hey, we have a similar Problem, we want to show all categories on all sites, not sticky and linked. With the actual code they are not linked, and we don't know why?! It would be cool to have the actual category underlined For the mobile version, we want the categories in one line with the option to swipe to the right, like a slide Is this possible? We are www.bottegajacobs.com Thanks in advance, Paul At the Moment we use this code: /* 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: ; 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: 40px !important; } /* fix first item space */ li.category-item:first-child a { padding-bottom: 0 !important; } .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; } } Link to comment
Paul_Wille Posted July 3 Share Posted July 3 I found out that nothing on the site is clickable anymore, so we removed this code and hope for your help 🙂 tuanphan 1 Link to comment
tuanphan Posted July 12 Share Posted July 12 On 7/3/2024 at 4:03 PM, Paul_Wille said: I found out that nothing on the site is clickable anymore, so we removed this code and hope for your help 🙂 Do you still need help? 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
Paul_Wille Posted July 12 Share Posted July 12 Yes, thanks again, we turned it off completely because it wasn't working well. Here I will redefine my request, we want for desktop, all categories on each category page, same for mobile, plus for mobile in one line and for swiping. Desktop and mobile both underline the current category. Its www.bottegajacobs.com thanke a lot, paul 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