Bootstrap 4 Custom NavBar for item active state

Question

I know how to add a nav bar to the page. However I am struggling with the active state. When an item is active (I am on that page) or hovered over the nav item should go from item to [item] also underlined. So I need to know how to add an active & hover state that underlines the item and adds those brackets around it.

Thanks.

Answer 1

although your description is quite vague I think I understand what you are trying to do. I am assuming that when you click a navbar button you move to a different page.

If you want a "nav-item" to appear active you simply have to give it the class "active"

<li class="nav-item active">
    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>

In the case of changing item to [item], you can do this with CSS:

.example:before {
    content: "item";
}

.example:hover:before {
    content: "[item]";
}

Though using this method does require there to be no text in the link otherwise you'll end up with "item[item]" being displayed.

I hope this helped. To learn more about bootstraps navbars, check here: https://getbootstrap.com/docs/4.0/components/navbar/

Answer 2

Thanks for your question and welcome to the community. Going forward please share some code that you have come up with so others can use it to learn:).

In regard to your problem, simply use an active class in CSS to change the state of your nav item.

To actually detect what page you are on will require a language. You could use PHP, see this existing post How to set current page "active" in php

Hope this helps

HTML

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

CSS

.nav-item {
  border: none;
  outline: none;
  padding: 10px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
}

/* Style the active class (and on mouse-over) */
.active, .nav-item:hover {
  background-color: #666;
  color: white;
}