// in css: /* Display line under clicked navbar link */ .active { text-decoration-line: underline !important; text-decoration-thickness: 2px !important; color: rgb(20, 19, 19); } //in html: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function () { // Underline to remain in navbar after click using URL jQuery(function ($) { var path = window.location.href; // because the 'href' property of the DOM element is the absolute path $('.nav-link').each(function () { if (this.href === path) { $(this).addClass('active'); } }); }); }); </script> //Note class in link should be nav-link
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter