'Why chrome removes bootstrap's .active class from dropdown-item?

I have a navbar with a dropdown and I want to have one of its items marked as active, my HTML is:

<nav class="navbar navbar-expand-md navbar-dark bg-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nb">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div id="nb" class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item active dropdown justify-content-center text-center">
                <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">User guide</a>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="link1.html">Link 1</a>
                    <a class="dropdown-item active" href="#">Active Link</a>
                </div>
            </li>
        </ul>
    </div>
</nav>

I am using these styles and scripts:

<head>
    ...
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" integrity="sha256-zmfNZmXoNWBMemUOo1XUGFfc0ihGGLYdgtJS3KCr/l0=" crossorigin="anonymous" />
    <link rel="stylesheet" href="CSS/my_style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $(function() {$('body').scrollspy({offset:0.02*window.innerHeight});})
    </script>
</head>

However, this works in MS Edge, but it for some reason DOESN'T work in chrome. The .active class disappears from the dropdown item after a document is loaded.

Chrome: Version 77.0.3865.90 (Official Build) (64-bit)

MS Edge: Microsoft Edge 44.18362.329.0, Microsoft EdgeHTML 18.18362

Any ideas why chrome does that and how to stop it?

Thanks

EDIT

Problem seem to be in a scrollspy

<body data-spy="scroll" data-target="#side-nav" data-offset="0">

that is used on a sidenav

        <div id="sidebar" class="col-md-3 col-lg-3 col-xl-2 d-none d-md-block">
            <nav id="side-nav" class="navbar navbar-light bg-dark sticky-top">
                <nav class="nav nav-pills flex-column">
                    <a class="nav-link arrow" href="#top"><i class="fas fa-arrow-circle-up fa-2x"></i></a>
                    <a class="nav-link" href="#intro">Introduction</a>
                    <a class="nav-link" href="#usage">Usage</a>
                    <a class="nav-link" href="#properties">Properties</a>
                    <a class="nav-link arrow" href="#footerInfo"><i class="fas fa-arrow-circle-down fa-2x"></i></a>
                </nav>
            </nav>
        </div>

When I add the active class to a dropdown-item manually in dev. tools and then scroll down a bit - it disappears in chrome (not in MS edge).

htmltwitter-bootstrapgoogle-chromemicrosoft-edge


Solution 1:[1]

Please try to clear the browser data (cache, cookie or history) first, then, retest your code. I have created a sample using your code, it seems that everything works well on my side, the result like this.

If still not working, please try to use F12 developer tools to check the CSS, and check your code, whether it contains other JavaScript script which will remove the active class?

Solution 2:[2]

The problem is ScrollSpy will remove active class from all dropdown-item elements (in order for it to work like this) within your target which in most cases is body. The solution is to exclude some dropdowns from being targeted by ScrollSpy by using a different active class (eg. selected), and create custom CSS for the new selected class .dropdown-item.selected.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Zhi Lv
Solution 2

Related Questions