Make Anchor/Name/ID entries set menu entry Active?

On a page, where I have multiple ID’s for different blocs/sections, and I set the Menu entries to navigate to URL: /#about, /#contact, /#other-bloc and so on.
This all works well, except the active menu entry doesn’t change/shift.

Is it possible to make it active menu entry (, or what it’s called) follow these ID, name or anchor tags? :nerd_face:

Like I have:
… and Search links to /#search
If I click it, it navigates down to the Bloc with the ID search, but the Menu doesn’t indicate it’s navigated there …

That is what they call ScrollSpy, its built into Bootstrap.

1 Like

Ah, thanks! :smiley:

…So, I need to add the attributes data-bs-spy and data-bs-target (and tabindex) to either the body (how do I accomplish that in Blocs?) or the bloc I’m scrolling to? :innocent:

data-bs-spy=​"scroll" data-bs-target=​"#navbar" tabindex="0"

I tried adding these attributes above to the bloc with ID #search, but didn’t get that to work.

And I then added to the Additioncal CSS:

body { overflow-y: scroll; }

Does it also need some defined height for this to work?

What am I missing/misreading here?

Edit: Knowing the search term scrollspy I found other articles, like:

Using BS5, I needed to add JS to project footer:

const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '.site-navigation'

And add to global CSS:

body { overflow-x: unset;}

Still, using menu manager to manage the menu entries, and having some point to pages and others to URLs like /about/#contact was a little buggy, the scrollspy only looks for #id’s … or something.