Html Question posted in
Some basic documentation can be found here.

Html – Cannot hightlight active nav-item in Bootstrap-5

I’m trying to use the navbar in Bootstrap and I want to hightlight (change color) of the nav-link on the bar that is active. However, it doesn’t work. Also I’m using Bootstrap-5.

Here is my CSS file:

.nav-link {
    color: #666777;
    font-weight: 400;
}

.nav-link.active {
    color: red;
}

.nav-link:hover {
    color: #000;
}

And here is my HTML file:

<!DOCTYPE html>

<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="/styles.css" rel="stylesheet">
        <title>My Webpage</title>
    </head>
    <body>
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="/index.html">My Webpage</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item active">
                      <a class="nav-link" href="/index.html">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="/about.html">About</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Hobby
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/hobby/anime.html">Hobby1</a>
                        <a class="dropdown-item" href="/hobby/books.html">Hobby2</a>
                        <a class="dropdown-item" href="/hobby/vtubers.html">Hobby3</a>
                      </div>
                    </li>
                  </ul>
                </div>
              </nav>
        </header>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </body>
</html>

When I change the href in the tag to "#", for example: <a class="nav-link" href="/about.html">About</a> to <a class="nav-link" href="#">About</a>, it does change the color when I click it, but then I cannot navigate the user to another page.

I also tried to manually add the class .active to the appropriate nav-link in each file but it didn’t work.

Thank you in advance.

Tags:

2

Answers


  1. 0

    I think you are using Bootstarp 5,but your HTML file includes Bootstarp 4 scripts .This might be causing some issues .For navigating user to another page I think you should put your file location in the place of # like "./nextPage.html" like that. Hope this might work for you

    Login or Signup to reply.
  2. 0

    you have multiple issues with your provided code.

    1. If we use bootstrap CDN, we need to add two links one of css & other of script. You have already added both but issue is your css is of version 5.3.3 and your script is of version 4.3, so need to fix that issue first.
    2. Second issue is with your css, you are targeting nav-item to be active instead you have to target <a> within nav-item which is nav-link.
    3. If you want to override any bootstrap property, you always need to add !important to css.

    I have fixed all of issues in below code, you can check them out and also if this response helped you mark it green check mark (accept this answer), so it will help to someone with similar issue. Thank You.

    .nav-link {
    color: #666777 ;
    font-weight: 400;
}

.nav-item .active {
    color: red !important;
}

.nav-link:hover {
    color: #000;
}
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="/index.html">My Webpage</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                      <a class="nav-link active" href="/index.html">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="/about.html">About</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Hobby
                      </a>
                      <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="/hobby/anime.html">Hobby1</a>
                        <a class="dropdown-item" href="/hobby/books.html">Hobby2</a>
                        <a class="dropdown-item" href="/hobby/vtubers.html">Hobby3</a>
                      </div>
                    </li>
                  </ul>
                </div>
              </nav>
        </header>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search