Guys, need your help! On catalog page I have categories and subcategories cms collections. When I go to subcategory page, only relevant subcategory link have active status. How can I make both category and subcategory link have active status, so user can see in what category he is.
Here is my public share link: LINK
(how to access public share link)
You can accomplish this with a small piece of jQuery.
On page load, you’d find your active subcategory link, and then identify its parent and apply the styling you want. If those category links already have an active styling, you can probably just trigger it by applying the class.
I can’t see your HTML structure but that would look something like this;
$(function() {
$(".w--current") // find the selected item
.closest(".cat") // find its category parent
.children("span") // target the thing you need to style
.addClass("w--current"); // apply the class you want
});
Thank you a lot! I will try)
I’ve tried but for some reason it doesn’t work( I guess, i just did something wrong.
Maybe you could view the project and explain how to make it on my example?
Would be very grateful for that)
Based on your current nav design structure, this is probably the shortest path from the currently-selected subcategory, to its parent category element in the DOM.
$(function() {
$(".w--current") // find the selected item
.closest(".category-container") // find its category parent
.children("a") // target the thing you need to style
.addClass("w--current"); // apply the class you want
});
Yes, everything works as it should! Thank you so much, you helped me a lot)
Mike, sorry to bother you, don’t want to seem intrusive. But client asked me to do one more thing on catalog page. For now I have native webflow interaction on category links. When I hover on it, it shows submenu links. Is it possible to leave subcategories list open, when I am on the page of current subcategory link? Like on screenshot below. Maybe it can be done with jQuery too? Would be very grateful for your help)
Hey Dmitry, I was wondering about that. I’m guessing you’ve used a standard webflow navigation set to open on hover.
Yes I can see how that would be a bit touchy as a sidebar navigation. You might turn off the open on hover, so that at least they don’t flicker open and closed. But you’d want to change stylng etc. so it’s obvious to click.
I don’t personally know of any scripts that force the menu open, but you’re not the first to tackle this. A quick search came up with these;
Another option, which you may not love, is to replace that side menu with a more traditional sidebar navigation, or perhaps an accordion menu. It will be less “jumpy” but you’d also have to code your own “you are here” current item selection & highlighting.
Well, guess what, I just decided to check something, and it looks like we can un-collapse the sub-items manually without going through any Webflow API’s. Webflow is collapsing them with a style=“display: none;”, so we just overwrite that like so;
$(function() {
// Expand the menu
$(".w--current") // find the selected item
.closest(".subcategory-container") // find its category parent
.css("display", "block"); // apply the class you want
// Highlight the Category as current
$(".w--current") // find the selected item
.closest(".category-container") // find its category parent
.children("a") // target the thing you need to style
.addClass("w--current"); // apply the class you want
});
Note that this script is designed to work when you have a brand selected, e.g.;
https://mepharma.webflow.io/catalog-brand/milistan-naturale
That’s the page the above script would go best on.
If the user clicks directly on a category like this-
You may want to expand that too. It would be a very similar script, but starting from the category and the expanding the subcategory.
Wow i’s actually working!
I can’t even find the words to thank you! You’re a f***in genious 