html – New bar link changes color on page refresh (bootstrap)

I’m brand new to HTML / CSS / Bootstrap. I changed the color of a link on Newbar, however I have a problem where the original color (blue) of the link on Newbar appears when refreshing the page. He only does it moment by moment, but I wouldn’t want him to do that. Any help would be greatly appreciated!

The link to this issue is “Return to homepage”.

CSS

#nav-bar {
    background-color: none;
}

.nav-link {
    color: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: clamp(.625rem, 3vw, 1rem);
}

#nav-bar .active {
    background-color: #ff2d6c;
    border: 1px solid #ad1414;
}

#nav-bar .active:active {
    background-color: #ff2d6c;
    transform: scale(95%);
}

Boostrap

    <nav id="nav-bar">
        <ul class="nav nav-pills">
            <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="../../index.html">Return to Homepage</a>
            </li>
            <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Sections</a>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">dd-1</a></li>
                <li><a class="dropdown-item" href="#">dd-2</a></li>
                <li><a class="dropdown-item" href="#">dd-3</a></li>
                <li><a class="dropdown-item" href="#">dd-4</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" href="#">dd-5s</a></li>
            </ul>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Forum</a>
                </li>
            <li class="nav-item ms-auto">
                <a class="nav-link" href="#">Login</a>
                </li>
        </ul>
    </nav>

Write a Comment

Your email address will not be published. Required fields are marked *