Streaming live at 10am (PST)

Menu shows which page user is on


#1

Hi, I am guessing there is a topic on this, but I couldnt figure out what to search for, so here we go. I am trying to make it that when the user clicks on Europe, then the Europe button is active (and on Focuses in the hover state, which here would give the Europe a underline). Well, I cant figure out how to get the underline. Same goes for the main menu (so that it shows that we now are on Stores page).

http://badnorwegian.webflow.com/stores


#2

#3

Hi, not sure how to get out the CSS, but will this help?
https://webflow.com/design/badnorwegian?preview=6b588c3e52a0c55223848b7d2eeaab4f


#4

Please clarify what you are trying to achieve.


#5

Hi, that is your private link... you can get the external link for support by going to site settings and on first page there is external link for public view... If you can share that link, then the friends here on webflow can give you some advice/help : cheers


#6

Hi and thanks @cyberdave. But as far as I can see, this is the only link I can get from the Public Link bar: https://webflow.com/design/badnorwegian?preview=e7bd3f575a7542d6ba3807bbd3cc0eb5 (see picture attached). But this is the same link as previews posted.

@thesergie The thing I want, is that when you go to the Store page, Norway should be highlighted (and the list of Norwegian shops previewed), and when you click USA, USA should be highlighted. Hope this make sense:)

?


#7

Hi, thanks for the link, it seems the second one was different, but that one comes up ok. I noticed you have these store listings on different pages... so one thing you can do, is to add an additional class to the navlink that should be highlighted for each page you have the stores in. So you could for example, add an additional class called "active" to the USA link when on the store USA page, and style that link and perhaps background color etc, to something different than the other links, and then just add that "active" css class to each link that need to be highlighted on the different pages.

Perhaps others could comment further. I am not sure if the "active" class is applied to menu links automatically when the menu is used as a symbol, across multiple pages.

I know that when you use sections in a single page, and a navbar menu is used to navigate between those sections, there is a "current" class that is automatically assigned to a menu link which is linked to a given section and the section is currently in focus. I do not think though, that this works same way when a navbar menu is used across multiple pages, and that you may need to assign which nav link should be "active" depending on what is current store page.

That is what you are trying to do though right? I mean, make the navlink for a particular store page, active by default and showing differently than other links... Cheers

p.s. one could also do this in javascript, to get the name of the current page after the document has loaded, and update the target navlink with the "active" class via javascript code, but I am not sure if webflow supports this behaviour natively, so you either have to code this yourself, get a freelancer to do it, or just update each page and the navlink that should have active status manually.

Again, there is usually more than one way to accomplish a task and some may have better solutions or methods... since you do not have so many store pages, it probably not take long to update a few pages and nav links manually.


#8

Hi @cyberdave and thank you for a great answer. Hmm, I see, guess the easiest way is to skip the whole Symbol thing for this menu and only have a menu on the different pages, where the right place (Norway, USA and so on), is highlighted for that plage. Tried to attache a new Class to the Symbol on the different page, but webflow is not letting me do that, so guess a Symbol only can have one class style. Java and coding is not something I know, so will go for the quick and dirty solution. Thanks again!!!!


#9