Set style to current link in a Navigation Bar with CSS

To set a style to current link in a navigation bar, add style to .active. You can try to run the following code to style current link:


Live Demo

<!DOCTYPE html>
         ul {
            list-style-type: none;
            margin: 5;
            padding: 5;
         li a {
            display: block;
            width: 70px;
            background-color: #F0E7E7;
         .active {
            background-color: #4CAF50;
            color: white;
         <li><a href="#home">Home</a></li>
         <li><a href="#company" class="active">Company</a></li>
         <li><a href="#product">Product</a></li>
         <li><a href="#services">Services</a></li>
         <li><a href="#contact">Contact</a></li>

Updated on: 01-Jul-2020

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started