How to define which is the "current category"

Design help General
1

Hi everyone,

I am having an issue that I could ‘possibly’ have resolved by creating 2 CMS collection pages inside a template and link one into the other, but I am hoping there is a simpler way. There must be.

Here is the link to the read only : Read only link
Here is the live website: link to live site

Here is my issue. On the homepage, when selecting on the navbar ‘rubriques’ (which is linking to a CMS collection template), it links to the right page, but to the “current category”. First of all, I would like to be able to decide myself what the current category is, for now it is “celebrities” and I would like “actualities” to always be the default. So it seems that the “current” is actually the last created category, am I right? It is a mystery to me what webflow defines as the “current” category, if anyone know? Cause it is the only option, ‘current’. I cannot find a simple way like filter and have the category “actualites” show up each time instead of random or last created category.
I hope I am being clear enough? And I also hope that I do not have to create another template to integrate inside the “rubriques/category” template as a fix since I am a bit short in time at the moment.

Thanks a lot for your help!

I wish you all a lovely weekend,
Max

2

hi @MaxCH an easy way is to use link to external URL instead current category where you paste in filed required address that is in your case https://www.france-tourette.org/categories/actualites this way you can use any address you need.

CleanShot 2021-04-25 at 11.38.08

3

Thanks so much Stan!
Of course, such an easy fix, how did I not think of that!
Now just one more question, there is no yellow background on “rubriques” anymore when using that method, to show that I am on the “rubliques” menu, I do not even find the current selector to apply the style with is applied to every other menu. Any idea?
All the best!
Max

4

hi @MaxCH it looks like Webflow doesn’t add w--current. I have searched why on this forum and find the way that should work. In shortcut try as path for URL use only /categories/actualites instead of full path. Based on this topic it should work

5

Thanks Stan, that’s perfect! It totally works.
Now another issue that you might have an answer to. When I click on “rubriques”, it now opens the right “actualites” and the background menu “rubriques” is yellow. But when (on the left) I select another category (any, for ie “videos”), the yellow background of the menu “rubriques” dissappears and the visitor cannot anymore see where he or she is in the page. Is there a way to keep the current menu tab background to appear yellow, even when selecting a new category?
All the best! And thank you already for having taking me that far already!
Max

6

hi @MaxCH you have answer to this question in topic I have posted above. You can set CSS condition if href path contain certain string. In your case it will be string categories.

As you have set styling exactly to href="/categories/actualites" style will be applied only to exact path. If you need add style to any path as caregories/done categories/covid-19 etc. you have to set CSS rule to look into href for certain string and when match is found apply styling.

Style you need to add is box-shadow: inset 0 -22px 0 0 rgba(255,232,114,.9); so your custom CSS will looks like this.

a[href*="categories"] {
  box-shadow: inset 0 -22px 0 0 rgba(255,232,114,.9)
}

Hope that it will work for you

EDIT: it doesn’t work the way as I have expected as it add underline on links in left column

7

Thanks for your input Stan, yes as you wrote in your edit it indeed adds underline to all links on the left column. Not sure what to do. It does seem that involving some custom CSS might do the trick. Now the question is which?

Or isn’t there just a way somehow to define in the CMS which category is the current one? Then here “actualites” would be the one the client would decide to define as current, tommorow maybe another one… Seems like a hassle for a solution that should just be a simple click away for the client, weird that it is not yet implemented…

9

Hi @MaxCH I have looked on your structure there is no way you will achieve your menu item style just with CSS. There need to be JS involved BUT it would not work 100% either as in left column you have links that pointing to urls that do NOT contain string categories this mean that it is a page that your nav item doesn’t know that exist so it would not be an easy task to achieve your idea.

10

Hi @Stan
That’s weird, on my end all of the links on the left columns contains the string categories, they are actually all populated from a CMS collection, which one did you find did not contain categorie? That could be fixed if a JS script would fix the issue, would you know how to write such script by any chance?

11

hi @MaxCH link I’m talking about is Dons. I am convinced you can force it to show yellow shadow for example to make each link listen to click and add to this menu item specific class that apply desired styling or add class w--current by force. but at first I did not study your structure in detail to see what will happen when you do that and at second Im not convinced that it is worth to do hack like that.

12

Hi @Stan Thanks a lot for your time.
Concerning “Dons” I see the link being categories/dons, like all other CMS generated categories, that is weird that on your end it is showing differently.
It gets a bit technical I see, what would you suggest?
Do you know if by default w–current is the last created category? Why would there be no simpler way to just bypass this is a mystery to me.
It’s been a while since I’ve written some JS and I am a bit rusty, and I surely would spend more time than I have on hand to find a fix/hack that as you said might not even be worth it.
I feel kind of lost about what to do now. You’ve been very helpful though, I am very grateful for that @Stan :slight_smile:

13

hi @MaxCH I don’t know why you can see url categories/dons when I do not.

CleanShot 2021-04-25 at 23.45.35

Anyway one simple thing you can try is to check browser address bar that will be checked on url change. I can’t do that as I can’t save code and try it on you page and recreating example will be a bit time consuming.

Here is what you can try.

  1. Give your menu item some id (hope you know how to do that)
  2. Grab this element with JS
  3. Check url on each change
  4. if condition === true add style

here is code example:

const myRubriqs = document.querySelector("#yourCustomItemID")

if(window.location.href.indexOf("categories") > -1) {
//        alert("Alert: categories!");
       myRubriqs.style.boxShadow = "inset 0 -22px 0 0 rgb(255 232 114 / 90%)"
}

not sure if this will work but you can try it

14

@Stan It totally worked you’re a life saver. Thanks so much!
My bad for “dons”, It was a 301 redirect, that’s why, it actually doesn’t link to articles/ ressources but to another page so not a problem if it doesn’t work on that one.
This is awesome, I was already having headache thinking JS :sweat_smile:
Thanks again and all the best!

1 Like
15

Glad that worked for you :wink:

1 Like