How to Current link blip on a navigational item

How-to-Current-link-blip-on-a-navigational-item

Use an inset in box-shadow.
Your HTML Code is invalid. ul can only have li as children…hr are not permitted.

// HTML Code
<nav class="side-nav">
  <ul>
    <li class="current-link"><a href="#"><i class="fa fa-home"></i>Home</a></li>
    <li><a href="#"><i class="fa fa-film"></i>Movies</a></li>
    <li><a href="#"><i class="fa fa-television"></i>TV Shows</a></li>
    <li><a href="#"><i class="fa fa-thumbs-up"></i>Liked</a></li>
    <li><a href="#"><i class="fa fa-thumbs-down"></i>Disliked</a></li>
    <li><a href="#"><i class="fa fa-sliders"></i>Settings</a></li>
  </ul>
</nav>


// CSS Code

<style>
.side-nav {
  background-color: rosybrown;
  margin-top: 50px;
  height: 50%;
}
.side-nav ul {
  list-style: none;
  padding: 0;
}
.side-nav ul li {
  padding-left: 20px;
  margin: 10px 0 20px 0;
}
.side-nav ul li a {
  text-decoration: none;
}
/* === UTILITY CLASSES === */


.current-link {
  box-shadow: 8px 0 0 0 red inset;
}
</style>
We Well organized and easy-to-understand Interactive tutorials With lots of examples of how to use Tutorials WordPress, PHP, Bootstrap, Bootstrap 4, HTML, CSS, AJAX, jQuery, Woocommerce, Post, Database, Javascript, Theme, Responsive, Templates.

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact us

Fill in the form below or give us a call and we'll contact you. We endeavour to answer all enquiries within 24 hours on business days.