Keep all categories in top bar navigation in view on each category page

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

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

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?

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

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

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?
 

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?

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! 

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

Also, is it possible to chang ethe word "all" to "all products"

www.thejanimalstore.com password Artist2023

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?

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

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

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 

Hey, we have a similar Problem, we want to show all categories on all sites, not sticky and linked. 

1. With the actual code they are not linked, and we don't know why?! 
2. It would be cool to have the actual category underlined 
3. 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;
}
}

I found out that nothing on the site is clickable anymore, so we removed this code and hope for your help 🙂

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?

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