Sub Categories, getting them to display from Main Categories (check out my project link)

[codyarsenault]

Hey everyone! Here I have attached my project that I’m hacking on right now.
I’ve been experimenting with Categories and Sub categories. Check out my public share LINK

In this example I have created 3 CMS collections.
1- Main Categories.
2- Sub Categories.
3- Stories.

In the sub categories, I have 1 reference field that is referencing the main category.
In the stories, I have 2 reference fields. The first is referencing the Main Category and the second is referencing the Sub category.

In the navigation menu I’ve created, after clicking one of the main categories, I want the sub-categories that are referenced to that main category to appear in the drop down menu.
For example:
(Click on) Main Nav Link 1
(Then the sub categories appear)
Nav Link Sub Category 1
Nav Link Sub Category 2
Nav Link Sub Category 3

An example of this can be found HERE
ProductHunt uses this in their navigation menu.

@PixelGeek
@samliew
@ everyone

If anyone can take a peak at this and help solve this I think it’d be a great resource to the community.

Thanks,
Cody

Here is my public share link: LINK

[codyarsenault]

I have made some progress solving this.

Currently the navMenu dynamic list is connected to the categories collection.

So i went inside the categories collections and added a reference field. The reference field is referencing the Sub Category collection. I have not tried a multi reference field yet.

Now under the categories template, I created another stickyLink and connected it to the sub category reference.

So now when I’m on the homepage, there are no sub categories.
And when I click on a category it brings me to the category dynamic page, this then shows the sub categories I have connected for every category. Which is and

I want to have it so when I click a certain category, that specific categories SUB CATEGORIES show. And I can still see the rest of the MAIN categories too.

Again here is my LINK check it out

[codyarsenault]

Is there anyway to make it so when you click on the main category, you see that specific main categories related sub-categories.

The other Main Categories are still there, but their sub-categories are hidden

[StuM]

Hi @codyarsenault

I made a site which had category template pages which showed the sub-categories belonging to them, but i’ve not done a menu like yours to be able so assist.

@sabanna helped me figuring out what was possible - maybe she could cast her eye over this for you?

Stu

[codyarsenault]

Thanks for taking a peak! So far I haven’t figured out a workaround, but for now It’s okay. I’ll just deal with it

@sabanna if you could take a peak at this that would be awesome!

Thanks for trying

[codyarsenault]

Would it be possible to not make sub categories, but instead filters. Filters that specify the content

[sabanna (Anna)]

Hello, @codyarsenault!

You can use condition visibility feature for showing only those subcategories that you need (from current category)

Here is screencast of how to do that

This way will work if you will have the same amount of subcategories for each category. If it will be different for each subcategory you will need to add one more option for condition visibility (if subcategory is set)

Hope it helps

Best regards,
Anna

[codyarsenault]

Oh my god! Thank you so much you are a life saver I was literally banging my head into my keyboard trying to figure out how to get it to work

Thank you so much for taking the time to record that and explain WOW!!! THANK YOU THANK YOU THANK YOU!!!

There would be different number of sub categories, what would I have to add for the conditional visibility? Thanks again so much

[codyarsenault]

I think I understand, if there are more sub categories I just need to add another conditional label for the other 1’s.

Again thanks so much for helping out!!!

[codyarsenault]

I think I know what your talking about now, so for the category 3 there’s 5 subcategories and in category 2 there’s only 3 subcategories, leaving the other two stickLink’s empty with data, but their div’s are still there and also light up on hover.

See the image attached, is there a way to hide those using conditional visibility?

[codyarsenault]

Also after publishing the site here

It appears that the first sub category link in each main category isn’t selected and is acting normal but the rest, subcategories 2-5 are selected and highlighted like their in use, It’s super weird! I attached a picture to better describe what I’m talking about