Want store category menu to appear the same on every category page - not disappear!

Site URL: https://www.angelabritton.co.uk

Hello! I'm just setting up my website on 7.1 - www.angelabritton.co.uk

I don't know what the theme was called, sorry!

It's not finished yet - so the password is Angela 

I have a simple category menu (centered) in my shop section showing abstracts | gifts | cards | other with a line separating it and the products. When you click into any category though, it disappears. I think this is silly as it needs to stay there for for the sake of aesthetics and usability (otherwise you have navigate back to the home page to get to the shop again). Confused as I'm coming from Shopify where this is just the norm.

Can anyone help is layman's terms? I'm not super CSS literate 🙂  Thanks!

Hi Angela!

Click on one of the categories, then click Edit and Edit Section in the top right. Scroll down in this window, and you'll see a "Categories Type" section where you can enable the Category Title & Breadcrumbs options. This is separate from the main store page options. When enabled, once you have navigated from the main store page, this then appears with: "All / abstracts" for example.

Hope this helps!

Hi Birdie, 

I do appreciate your answer, but actually doesn't actually work properly for the centered menu! No worries, I think I will speak to chat to see if anyone can help me. 

Have a lovely day. 

On 8/18/2022 at 4:56 PM, AngelaB said:

Hi Birdie, 

I do appreciate your answer, but actually doesn't actually work properly for the centered menu! No worries, I think I will speak to chat to see if anyone can help me. 

Have a lovely day. 

Try adding this to Design > Custom CSS

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

Wow, thank you tuanphan, that actually worked! I appreciate your help.

Can I ask - a couple of questions regarding it?

1) The menu look uncentered for some reason, is there are reason for this?

2) There seems to be a lag in loading time now for the shop page, is this because of the code?

2) can I put in spacers and an underline in this menu as before?  i.e.

Abstracts | Gifts | Cards | Other

On 8/22/2022 at 10:39 PM, AngelaB said:

Wow, thank you tuanphan, that actually worked! I appreciate your help.

Can I ask - a couple of questions regarding it?

1) The menu look uncentered for some reason, is there are reason for this?

2) There seems to be a lag in loading time now for the shop page, is this because of the code?

2) can I put in spacers and an underline in this menu as before?  i.e.

Abstracts | Gifts | Cards | Other

#1. Try this CSS under

li.category-item {
    margin-right: 1vw;
    margin-left: 1vw !important;
}

#2. You can remove code & test this

#3. Try this CSS

div.nested-category-tree-wrapper li:after {
    content: "|";
    display: inline-block;
    position: absolute;
    top: 5px;
    right: -1vw;
}

div.nested-category-tree-wrapper li {
    position: relative;
}

Thank you 🙂

Thanks @tuanphan for the code, it works, but I wish I could get it to show on the product detail pages instead of the SS breadcrumbs.  For anyone that wants to highlight the categories on hover, I added this to mine (change 'white' to your desired highlight color, 'black' to your text color, and '|' [pipe] to your separator character):

/**** Highlight hovered category from tuanphan code ****/
.nested-category-tree-wrapper>ul>li:not(:last-child)> a:hover {
	color: white !important;
}
.nested-category-tree-wrapper>ul>li:not(:last-child)> a:hover:after {
	color: black !important;
	content:"|";
}
.nested-category-tree-wrapper>ul>li:last-child> a:hover {
	color: white !important;
}

Here is the complete tuanphan code I'm using with the separator additions (I tightened mine up a bit so you might have to tinker with the margin and padding):

/* Show category nav links credit tuanphan */
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;
    flex-wrap: wrap !important;
}
.nested-category-tree-wrapper>ul li {
    margin-left: 0.5vw;
}
nav.nested-category-breadcrumb {
    display: none !important;
}
ul.nested-category-children {
    display: none !important;
}
a.category-link.root {
    padding-top: 0px !important;
}
li.category-item:not(:last-child) a:after {
    content: "|";
    padding-left: 5px;
}