Hi everyone! Hopefully this is a simple question!
I want to make site like this: https://purpleorangepr.com/
Is it possible to add active/hover states to anchor links? (like how it’s orange when you’re scrolling through that section on the site)
Jess
You use ScrollSpy for doing this,
Its built into Bootstrap, and can be implemented into Blocs.
It’s on my list of tutorials to make actually.
Ok, thank you, as always! @Malachiman - I’m just starting on this project. I think I’m going to start a new thread on this topic because I have some further somewhat related questions.
I did a video on integrating ScrollSpy into Blocs a couple of weeks back.
@PeteSharp - I just wanted to let you know, I found one little issue with the solution shown in your video, I think.
I created a video that shows the problem! Problem with scroll - YouTube
As you can see, the nav doesn’t flip over until about 1/3 of the way through the bloc with small-large padding. I think this is because the nav is covering it up.
I took at look at your code:
<script>
window.addEventListener('load', (event) => {
var scrollarea = document.getElementsByTagName('body')[0];
scrollarea.setAttribute('data-spy', 'scroll');
scrollarea.setAttribute('data-target', '.site-navigation');
var navHeight = document.getElementById('top-nav').offsetHeight;
$('body').scrollspy({ target: '.site-navigation', offset:(navHeight) });
});
</script>
Does the “navHeight” somehow need to be adjusted to say a certain amount of pixels? I’m not quite sure. I am trying to learn code as I think I need it, but I’m a beginnner.
I take it you didn’t set the ID of your navbar. Going from memory I did mention it in the video.
This sets the pixel offset to the Navbar. You can also add additional pixels to that based on your design. But I don’t cover that in the video.
Eg. See this bit
Ah, that could be it! I will double check.
@PeteSharp Yes, you are right! I must have missed it originally! That resolved the problem. Thank you as always!! You are truly a Blocs expert. Wish I could code like you!
i’m doing a one page website with your tutorial and when a make a dropdown menu the active link is on blue and don’t know how to change to be as navigation menu, can you please help me?
Hi @contrakapa,
Sure, add the following class to the class editor, change the selector to active and set your style.
.dropdown-item
Hi @PeteSharp,
I use the class .dropdown-item and it help me to change all the style, the hover is working but the active not working.
hi, the class can change the normal and the good is that the active link is not blue. i change in the class manager the active to black and the normal to red and still in black, the active still not black, thanks for the help
The active selector will change the colour of the “active” state, which is while you are pressing the button.
So I take it your talking about the active class?
Depending on the class name you have assigned for the active class it would be (replace activeclass with your class name).
.dropdowm-item.activeclass
(I’m only on my phone, so I could be wrong 
)
Hi,
So i created the drop down menu and inside i put another link to a black bloc, my problem is that i can’t change the colour of the active link inside the drop down menu that is currently a blue background with black text by default. I want to change it to the same color as the navigation active links (black background with white text). I didn’t create any class, i just used your tutorial scrollspy file to test so i can do the same on the website that im making.
Sorry my english isn’t the best, i hope you can understand now 
Hi @contrakapa
If you are using my sample project then the following class added to the class editor should allow you to style it. I’m not on my Mac so I haven’t tested.
dropdown-item.active
Hi @contrakapa
I just tested and can confirm that using
.dropdown-item.active
works fine.
Thanks for explaining your situation more. The details do help us give the correct solution.
Hi,
this (.dropdown-item.active) class works, I was doing the color change in active mode on class editor and didn’t teste on normal mode, I’m a graphic designer and I’m starting on blocs, thank you
Ricardo
