In this codepen demo , I able to animate the displaying of an underline on nav elements. But, how do I keep the underline on the current page? The current page is titled Support-Tracker.
css:
.navbar .navbar-nav .nav-item .nav-link {
position: relative;
text-decoration: none;
font-size: 1.2em;
font-weight: bold;
color: white;
cursor: pointer;
padding-right: 2em;
padding-left: 2em;
justify-content: center;
}
.navbar .navbar-nav .nav-item .nav-link::before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #FFF;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.navbar .navbar-nav .nav-item .nav-link:hover::before {
visibility: visible;
transform: scaleX(1);
}
nav element:
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">EU34</a></li>
<li class="nav-item"><a class="nav-link">Support-Tracker</a></li>
<li class="nav-item"><a class="nav-link">CNDNet Rolling Log</a></li>
</ul>
</nav>
When you access the specific page you add the "targeted" navigation item (.nav-item) an class, like "active" or "current-page".
If you done this and added the following CSS Code to your css file, everything should work fine.
.navbar .navbar-nav .nav-item.current-page .nav-link::before {
visibility: visible;
transform: scaleX(1);
}
--
So your navbar on the current page looks something like that:
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link">EU34</a></li>
<li class="nav-item current-page"><a class="nav-link">Support-Tracker</a></li>
<li class="nav-item"><a class="nav-link">CNDNet Rolling Log</a></li>
</ul>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.