"Force" apply Current class to nav bar link

Design help General
1

Hey everyone,

I’ve been hunting around for potential solves in existing posts, but am still stuck. Any help here is hugely appreciated.

If you check out my site, you can see how my nav bar is currently set up…

What I am trying to figure out is how I can apply the “Current” class to the nav bar when in one of the sub-pages within “Resources”, for example. As it stands, if you click on “Resources” in the nav bar, you are taken to a page showing 7 icons. If you then click on “Digestion” for example, you are taken to a sub-page where “Resources” in the nav is no longer “Current” (or highlighted blue, in my case).

Is it possible to somehow “force” apply the “Current” class on certain pages, or have I made a mistake in my custom nav bar and do I need to re-build things.

Any guidance is hugely appreciated! Let me know if I am not being clear enough in my description, either!

Cheers,

Ed

Here is my public share link: LINK

2

@edblnd,

Ed,

This is difficult to trouble-shoot since when using your read-only link, when I click “digestion”, it takes me out of the editor to: healthy-eating-and-living.webflow.io/resources/digestion, which is not in your read-only site (in fact, most of the pages from “Resources” are missing in the read-only link), so I can’t interact with it or edit it in Webflow. I don’t want to have to fire up the browser’s inspector and Webflow to work with this. Please give a read-only link that supports editing all of the parts of the site you want help with.

Thanks!
~B.

3

Hi @itbrian40

Thanks for taking the time to look at this. Can you explain how I would go about creating a read-only link for the entire site? I followed the instructions here to create the one in my previous post.

Thanks for your time!

4

That’s how you do it. If you can show me in a screen capture of your site where those pages are, I’ll gladly look @ them, but I couldn’t find them.

~B.

5

Hi @itbrian40

Here are two screens, one showing the Resource Page, noting the blue text in the nav bar as a result of the “Current” class being applied. The second is one of the Digestion Sub Page, which I now realized I didn’t explain to you to be a Collection Page Template, which can be accessed in the Designer in the Collections Page Templates section or in the actual site by hovering over “Resources” in the nav bar.

1000×557 593 KB

2522×1430 2.11 MB

Thanks again for your help here… I really appreciate your time!

Ed

6

Not sure why they read-only site isn’t showing the pages I need to see to edit, but this screen cap isn’t going get it. Perhaps someone else can help you.

Good Luck,
~B.

1 Like
7

@cyberdave Sorry to pull you in from out of the blue here, but was hoping you might be able to help us trouble-shoot here. @itbrian40 has been trying to lend a hand here but the read-only link I am sharing with him won’t allow him to access the necessary pages.

Any guidance is hugely appreciated!

1 Like
8

Let me clarify… I haven’t used collections much, so this could be a very obvious fix for someone who does. I’m more of a WP person than Webflow collections person, and use Webflow as more of a lab for ideas and fast prototyping, not as a CMS. I have worked through the interface in your collections and found a place that looks like I’m where I need to be, but I can’t figure out how to edit what you need edited. To me it looks like custom CSS is required, but I’m not certain. I’m sure Dave or someone has a solution for you.

Take care,
~B.

1 Like
9

Digging deeper, here is what I found…

To change the color of the menu link, it as to be given this combo class:
<a class="navlink w--current" href="/resources">Resources</a>

Seen here…

1103×527 112 KB

Due to a rights issue on a read-only link, I cannot publish the site to see if it works, however, you could add this code in the header, publish and see if it works for you. Here is where I would drop it in at…

941×637 65.6 KB

In an effort to save you some time, here is the code snippet you can cut & paste in:

<style>

<a class="navlink w--current" href="/resources">Resources</a>

</style>

That’s as far as I can go and my code may not even work. :confused: Good Luck!

~B.

1 Like
10

@itbrian40,

You’ve been incredibly patient with me here - I really appreciate it!

Although your exact recommendation didn’t seem to work, it did inspire a solution that is surprisingly easy (in retrospect)!

I added a combo class to the Resources navlink and then wrote custom code to style it on the relevant pages, e.g.,:

[code]

.navlink.resources {
color: #5690D2;
}

[/code]

Thank you, again, for your time and for collaborating on this!

Ed

2 Likes
11

You’re welcome. Glad it worked out.

~B.