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

[flips]

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 (is.active, or what it’s called) follow these ID, name or anchor tags?

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 …

[PeteSharp]

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

Scrollspy

[flips]

Ah, thanks!

…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?

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:

Scrollspy in Bootstrap 5.2

Hi, I am struggling to get scrollspy to work in BS5.2 I followed the instructions by @PeteSharp for Bootstrap 4 Active Link Class color is not changing - #37 by Malachiman But on trying to adapt it for BS5 I am not having success. It’s prob to do with my lack of JS knowledge. Here’s what I’ve added at in the footer: <script> window.addEventListener('load', (event) => { var scrollarea = document.getElementsByTagName('body')[0]; scrollarea.setAttribute('data-bs-spy', 'scroll'); scrollare…

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

<script>
const scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '.site-navigation'
});
</script>

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.