Scrollspy in bootstrap incorrectly highlights the navigation item as active

I seem to be having an issue with bootstrap scrollspy.

For example:


    <header class="header pb-4 pb-lg-0 pt-4 sticky-top bg-white">
    ...
</header>

<div class="container-fluid width content-main" data-bs-spy="scroll" data-bs-target="#menuMainnav" data-bs-smooth-scroll="true" tabindex="0">
    ...
</div>

When I navigate forward in the navigation (from 1 to 2 to 3 to 4), everything seems to work fine with the active state being displayed correctly. However, when I navigate backwards (from 4 to 3 to 2 to 1), I encounter an issue. The active state in the navigation jumps from 3 to 2 and then from 2 to 1.

I have experimented with offset and rootMargin but so far nothing seems to resolve the issue.

Does anyone have any insights on what might be causing this problem?

cssbootstrap-5

Answer №1

My issue has been resolved thanks to this:

data-threshold="0,1" data-root-margin="-30% 0% -70%"

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What methods can I use to identify my current page location and update it on my navigation bar accordingly?

My latest project involves a fixed sidebar navigation with 3 divs designed to resemble dots, each corresponding to a different section of my webpage. These sections are set to occupy the full height of the viewport. Now, I'm facing the challenge of de ...

javascripthtmlcssvue.js

Having trouble printing a section of a webpage after making CSS adjustments

When trying to print part of a page, I used the following method. It successfully prints that portion of the page, however, it does not preserve the CSS effects. <body> <h1><b><center>This is a test page for printing</center&g ...

javascripthtmlcssprinting

Preventing jQuery slideToggle functionality from toggling multiple elements at once

I am currently working on a project where I have a series of images with captions that appear underneath each one. To show or hide the caption for each image, I am using slideToggle when the image is clicked. $('.imageholder').click(function() ...

javascriptjquerycssslidetoggle

Utilizing CSS3 to perform multiple 3D rotations

I am attempting to rotate a face of a cube twice in order to have that face fall flat on one side. For reference, please see the illustration of my goal here: https://i.stack.imgur.com/kwO8Z.png I have included my current progress below, using a 45-deg ...

google-chromecsswebkitwebkit-transform

Ways to align Bootstrap navigation elements to the left and other content to the right?

I am currently using a Bootstrap 5.x navbar on my website with the following code: <nav class="navbar navbar-expand-lg navbar-custom navbar-dark fixed-top"> <div class="container-fluid px-5"> <a class= ...

navbarbootstrap-5

Dynamically adjusting the width of an HTML element with ng-style using percentage values in AngularJS

I am facing a challenge where I need to display a progress bar in my UI based on a percentage value stored in a JSON response object. Here is an example of the JSON object: { completionPercent: 42 } The desired UI outcome should look like this: ┌ ...

javascriptcssjsonangularjsdata-binding

CSS creates captivating image hover transitions with span elements

<a href=""><img src=""><span>content</span></a> When I hover over the image, the content within the span appears using relative positioning with display set to none and absolute positioning in the span tag. My query is regard ...

htmlcsscss-transitions

Navigate the child div while scrolling within the parent div

Is there a way to make the child div scroll until the end before allowing the page to continue scrolling when the user scrolls on the parent div? I attempted to use reverse logic Scrolling in child div ( fixed ) should scroll parent div Unfortunately, it ...

javascriptjqueryhtmlcssscroll

SVG tags are not functioning properly

Hello, I am new to working with SVG files. I have a set of icons created using SVG and I am attempting to use the <use> tag in order to display a specific part of an SVG file. However, I seem to be encountering some issues and I am unable to identi ...

javascripthtmlcsssvg

Eliminate the hovering effect from images that are hyperlinked

I am feeling incredibly desperate as I have spent hours searching the internet for a solution with no success. When it comes to text links, I have included the following CSS code: a:hover img { border-bottom: none !important; } However, this code is als ...

javascriptjqueryhtmlcss

Issues with the proper display of Bootstrap 4 in Django are causing problems

I am currently in the process of setting up Django to work with Bootstrap. Despite my efforts, I can't seem to get it functioning correctly and I'm unsure of where I may be making a mistake. Initially, I am just trying to display a panel. You can ...

pythonhtmlcssdjangobootstrap-4

Contact form in Bootstrap 5 lacks responsiveness

I am currently exploring Bootstrap 5 for my website design project, and one of the features I have implemented is a contact form. While the white arrow that separates the two sections blends in seamlessly on desktop and laptop screens, it doesn't quit ...

htmlcssresponsive-designfrontendbootstrap-5

The Radio button and Checkbox values are causing an issue where the Radio button is continuously summing upon clicking without a limit. Why is this happening? Check out

I'm currently stuck in a function and believe it would be helpful for you to guide me along the correct path. My goal is to sum the values of checked boxes with the values of checked radio buttons. However, the radio values are continuously accumulat ...

javascripthtmlcsscheckboxradio-button

What is the best way to combine two menu plugins in Wordpress?

Currently, I am in the process of creating a logo with a drop down menu for my website, which can be found at . After discovering a widget called Menu Image that successfully transformed a menu item into a photo, I decided to add another widget called Ma ...

csswordpressplugins

The gradual disappearance and reappearance of a table row

I am struggling with making a row fade out when a specific select value is chosen (such as "termination"), and fade in when any other option is selected. The code works perfectly fine when the div ID is placed outside the table, but once I encapsulate it w ...

javascripthtmlcss

Troubleshooting Problem with Google Maps CSS

I'm in the process of constructing a website utilizing Foundation and have integrated Google Maps to showcase some markers on it. However, I've noticed that the map control elements in the top left corner (zoom in and zoom out) have disappeared, ...

cssgoogle-mapszurb-foundation

How can I ensure a div expands over another element when hovering the mouse?

I have a development div in the footer with a hover effect that expands it. However, it is currently growing underneath the top element on the site. I want it to expand on top or push the element above. Website: I've tried using position, float, and ...

htmlcss

Is there a way to extract the text from the inner div of an element using nightwatch.js?

I'm attempting to retrieve the content of a cell within a table, with the following CSS structure: <div data-testid="cellvalue_row-1_col-0" class="Table-cellContent" xpath="1"><span data-testid="tableCellCon ...

javascripthtmlcssnightwatch.js

Scale up the font size for all text on the website uniformly

Recently, I decided to switch a website's font to a non-web typeface. However, I quickly realized that the font was extremely thin and difficult to read. I attempted a simple CSS fix using * { font-size:125% }, but unfortunately, it did not have the d ...

javascriptjquerycssfontsfont-face

Iconic Side Navigation with collapsed button malfunctioning due to negative positioning

I'm facing two issues with my webpage. First: I have three buttons on the right side of my page that are supposed to behave like the buttons on this example. However, when you scroll, you can see that their position is incorrectly displayed "outside" ...

javascripthtmlcssbootstrap-4display