I am using the same project in this tutorial (Style the Active Page Link in Blocs - YouTube)
Maybe there is something you have added somewhere? In any case, you can send me the project file and I will check what’s causing the issue.
The extra tutorial did the trick!
Thanks Eldar!
2 Likes
Cool! I will link it in the Blocs 5 course as well, so people who have the same problem will know where to go to find a solution.
1 Like
Yeah, it can drive you mad. Should be such an easy thing to change, yet it isn’t. You get there if you know what can cause issues though 
Yeah, I agree.
I wish it was simpler. For example, just select the navbar, set the regular, hover, and active link colors in the sidebar.
2 Likes
I’ve done it the following way for a long time. We have even talked about it on the forum before.
Project setting
.active
Custom class
.nav-link.active
That’s it. Easy. (Note, no space between classes on the custom class)
5 Likes
You can PM him on the forums, no need to hijack the thread for a message
1 Like
I’ll just delete it then.
@PeteSharp s there a way to make this work for a one-pager as well? So for a scroll-to-target link in the menu?
1 Like
Scroll spy is what you would use for a single page.
I have a video for using it with bootstrap 4. But it’s all documented on the bootstrap 5 docs.
Do you have a link to the video?
I’m on my phone at the moment. I’ll sort something when I get back to office
1 Like
Hi @tomster
Here is the video… It’s a little old now and based on BS4, BS5 is different in that it’s not using jQuery, but Javascript. (Oh man I remember making this in the early hours of the night, 
they say don’t text someone when your angry, same with videos, don’t make them when you are tired.)
I will likely make this a Bric at some stage, so its easy for people to drop into their projects and no-code.
1 Like
Thanks for your hard, nightly work @PeteSharp but I can’t get it to work. I’ve read the documentation for BS5 but that’s not working for me. Stuff like this is the reason I switched to a builder like Brics in the first place 
.
1 Like
Might have to wait for the Bric then 
Check! Keep us posted please…
Thanks for all your answers!
1 Like
Having recently upgraded my office iMac from Mojave to Monterey (long story why it took this long, so I spare you), I can now use Blocs 5 rather than Blocs 4. (Still can’t use Bootstrap 5 due to Pete’s critically important bit of code being incompatible, but we can’t have it all, I guess.) Anyway, that transition to Blocs 5 and my subsequent testing ultimately led me to this thread. Sadly, after reading every post and watching the video by @Eldar , I found nothing works. Clicking in my navigation menu doesn’t result in a text color change.
Note that my menus are not generated by Blocs but are rather hand-made. I had to do that years ago to get more complex menus, which you can see on this example page.
The text in my menus are styled with a class named “navi-links-new”. I then created a new class (in my offline testing only) which changes the color to something else and named that new class: “activenavilinks”. I added that to Project Settings > Active Link Class, as shown below…
When I then click View > Preview In Browser > Safari and click on various links in my menu, the color does not change. And yes, “activenavilinks” is indeed ordered at the very bottom of Class Manager, as per what you see in the video by @Eldar.
When I examine the page code, I see that my class named “activenavilinks” is found wrapped inside something named “data-active-page” as you can see below:
If I double-click inside 'class="navi-links-new ', Safari will let me add text. So I proceeded to add “activenavilinks” …
And I then pressed return to yield this code:
And to my delight, the color of the お問合せ navigation link changed! But alas, it only works as a hack. How do I make Blocs generate the correct page code such that “Active Link Class” is recognized?
If no one knows the answer, then could someone post a URL to an example page from your site where such is properly implemented so I can review the HTML code and perhaps figure out a solution from that? I have no idea what the code should look like on a working page, which is why I ask.
Thanks!