Tab CSS not staying highlighted on active tab upon loading page or clicking somewhere else

user_11353092 0
Viewed 642

The nav tab is created using Bootstrap 4. When the page loads, it automatically loads the home tab (desired), but the home tab is not highlighted. Clicking on the tab (or any of the other tabs) will highlight the tab correctly, but the second issue is that upon clicking the mouse anywhere else, the highlight disappears.

I would like to solve two issues:

  1. Have the home page already be highlighted as active when loading the page in.
  2. When clicking the cursor anywhere on the page, still have the active tab stay highlighted.

The page loads Home first but the Home tab is not highlighted

/* And here is the CSS */

nav>.nav.nav-tabs {
  border: none;
  color: #fff;
  background: #005440;
  border-radius: 0;
}

nav>div a.nav-item.nav-link,
nav>div a.nav-item.nav-link.active {
  border: none;
  color: #fff;
  background: #005440;
  border-radius: 0;
}

.tab-content {
  background: rgb(254, 254, 254);
  line-height: 25px;
  border-top: 5px solid #006950;
  border-bottom: 5px solid #006950;
  border-left: none;
  border-right: none;
  padding: 30px 25%;
}

nav>div a.nav-item.nav-link:hover,
nav>div a.nav-item.nav-link:focus {
  border: none;
  background: #006950;
  color: #fff;
  border-radius: 0;
  transition: background 0.20s linear;
}
<!-- Here is the HTML body -->

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 ">
      <nav>
        <div class="nav nav-tabs nav-justified" id="nav-tab" role="tablist">
          <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
          <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
          <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
        </div>
      </nav>

      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
          Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt
          irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis
          reprehenderit occaecat anim ullamco ad duis occaecat ex.
        </div>
        <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
          Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt
          irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis
          reprehenderit occaecat anim ullamco ad duis occaecat ex.
        </div>
        <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
          Et et consectetur ipsum labore excepteur est proident excepteur ad velit occaecat qui minim occaecat veniam. Fugiat veniam incididunt anim aliqua enim pariatur veniam sunt est aute sit dolor anim. Velit non irure adipisicing aliqua ullamco irure incididunt
          irure non esse consectetur nostrud minim non minim occaecat. Amet duis do nisi duis veniam non est eiusmod tempor incididunt tempor dolor ipsum in qui sit. Exercitation mollit sit culpa nisi culpa non adipisicing reprehenderit do dolore. Duis
          reprehenderit occaecat anim ullamco ad duis occaecat ex.
        </div>
      </div>

    </div>
  </div>
</div>
</div>
</div>

I tried debugging it and I know the issue is somewhere with 

nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus

-in the CSS but I just can't figure out what.

If you guys see anything that can be improved let know, still figuring out HTML and CSS. Thank you!

bootstrap-4 tabs css html
1 Answers

The two selectors:

nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus

are only applying their styles when the nav item is hovered or focused, which is the behaviour you're experiencing - when you click away you are no longer hovering/focusing the element.

You want to also apply that style to the active class that is applied to the home tab.

Change your css to this:

nav > div a.nav-item.nav-link:hover,
nav > div a.nav-item.nav-link:focus,
nav > div a.nav-item.nav-link.active
{
  border: none;
    background: #006950;
    color:#fff;
    border-radius:0;
    transition:background 0.20s linear;
}

This will apply the style to whatever nav item is active as well as nav items that you hover or focus.

user_66534260
Related