How can I keep a css :active style after I release my mouse on a bootstrap navbar

Question

I have a css statement that looks like the code below and when I click on it white displays at the bottom of the navbar list item, but if I release the mouse click the white border bottom goes away. I want a white bottom to stay under each tab that I am on when I click from tab to tab. So it shows what tab I'm currently on. Here is my Fiddle

.nav-pills > li > a:active {
    border-bottom: 5px solid white;
}

.menupartial {
  background-color: #16749F;
  opacity: .9;
  width: 100%;
}
.menupartial a {
  color: lightgrey;
  font-weight: bold;
}
.nav-pills > li > a {
  border-radius: 0;
}
.nav-pills > li > a:hover {
  border-radius: 0;
  background-color: #16749F;
  color: white;
}
.nav-pills > li > a:active {
  border-bottom: 5px solid white;
}

<div class="row menupartial">
  <div class="col-md-12">
    <ul class="nav nav-pills">
      <li>@Html.ActionLink("User", "UserProfile", "Account")</li>
      <li>@Html.ActionLink("Profiles", "Index", "Profile")</li>
      <li>@Html.ActionLink("Spaces", "Index", "Space")</li>
      <li><a href="#">Your Schedules</a>
      </li>
      <li><a href="#">Your Messages</a>
      </li>
      <li><a href="#">Your Groups</a>
      </li>
      <li><a href="#">Your Friends</a>
      </li>
    </ul>
  </div>
</div>

Look here, maybe that helps: http://stackoverflow.com/questions/12960068/keep-css-active-state-after-click-with-jquery — PeterPan, Sep 15 '15 at 23:11
This *may* be possible with pure css but I would need more information on what else is going on when you click the links. Here are some tab like examples from a couple of my previous answers that are pure css/html: http://stackoverflow.com/a/30115605/4665 & http://stackoverflow.com/a/30092724/4665. Javascript is probably your best bet though. — Jon P, Sep 16 '15 at 00:05

Jon P · Accepted Answer · 2015-09-16T00:35:59.073

You can't keep :active after releasing the mouse button because that is not how it works.

Here are a couple of options, one javascript/jquery, the other CSS and HTML

Jquery

Clean, concise and flexible

js

$(document).ready(function() {
  $(".nav-pills a").click(function() {
    $(".nav-pills a").removeClass("active");
    $(this).addClass("active");
  });
});

css

.nav-pills > li > a:active,
.nav-pills > li > a.active {
  border-bottom: 5px solid white;
}

$(document).ready(function() {
  $(".nav-pills a").click(function() {
    $(".nav-pills a").removeClass("active");
    $(this).addClass("active");
  });
});

.menupartial {
  background-color: #16749F;
  opacity: .9;
  width: 100%;
}
.menupartial a {
  color: lightgrey;
  font-weight: bold;
}
.nav-pills > li > a {
  border-radius: 0;
}
.nav-pills > li > a:hover {
  border-radius: 0;
  background-color: #16749F;
  color: white;
}
.nav-pills > li > a:active,
.nav-pills > li > a.active {
  border-bottom: 5px solid white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row menupartial">
  <div class="col-md-12">
    <ul class="nav nav-pills">
      <li>@Html.ActionLink("User", "UserProfile", "Account")</li>
      <li>@Html.ActionLink("Profiles", "Index", "Profile")</li>
      <li>@Html.ActionLink("Spaces", "Index", "Space")</li>
      <li><a href="#">Your Schedules</a>
      </li>
      <li><a href="#">Your Messages</a>
      </li>
      <li><a href="#">Your Groups</a>
      </li>
      <li><a href="#">Your Friends</a>
      </li>
    </ul>
  </div>
</div>

CSS Using :Target

Pure CSS but is dependent on a hierarchical html layout.

Give your li an ID and target that in the href attribute in the a tag.

.menupartial {
  background-color: #16749F;
  opacity: .9;
  width: 100%;
}
.menupartial a {
  color: lightgrey;
  font-weight: bold;
}
.nav-pills > li > a {
  border-radius: 0;
}
.nav-pills > li > a:hover {
  border-radius: 0;
  background-color: #16749F;
  color: white;
}
.nav-pills > li > a:active,
.nav-pills > li:target > a {
  border-bottom: 5px solid white;
}

<div class="row menupartial">
  <div class="col-md-12">
    <ul class="nav nav-pills">
      <li>@Html.ActionLink("User", "UserProfile", "Account")</li>
      <li>@Html.ActionLink("Profiles", "Index", "Profile")</li>
      <li>@Html.ActionLink("Spaces", "Index", "Space")</li>
      <li id="Schedules"><a href="#Schedules">Your Schedules</a>
      </li>
      <li id="Mesages"><a href="#Mesages">Your Messages</a>
      </li>
      <li id="Groups"><a href="#Groups">Your Groups</a>
      </li>
      <li id="Friends"><a href="#Friends">Your Friends</a>
      </li>
    </ul>
  </div>
</div>

How can I keep a css :active style after I release my mouse on a bootstrap navbar

1 Answers1