active link featured image

HOW TO CHANGE ACTIVE LINK BACKGROUND

Having your navigation links up and running is a thump up especially when your active link is having a different styling to differentiate it from all other links, and the real deal here is changing the background color. Although we can change the text color, but,do you think changing the text color alone is enough? How about changing the background color as earlier stated to give your site visitors the notion of the active link? That will surely be a good idea.

A quick reminder, there are three noticeable state of a link. these are;

  • Unvisited
  • Visited
  • Active

Secondly, let me remind you of the different link colors and what they stand for

Active link and other Links Colors In Html

A link will appear like this By default in most if not all browser,

  • An unvisited link is underlined and has a blue text color (except changed in css)
  • A visited link is underlined and has purple text color (except changed in css)
  • An active link is underlined and has red text color (except changed in css)

And as usuall, you can change those default in CSS.

The code below shows a list of links in a navigation and the active link having a background color to notify the site visitor of the active link.

HTML

<body>

    <ul>

      <li><a class=”active” href=”#home”>Home</a></li>

      <li><a href=”#News”>News</a></li>

      <li><a href=”#contact”>Contact</a></li>

      <li><a href=”#about”>About</a></li>

    </ul>

  </body>

</html>

by default, your result should be like the picture shown below

default link without active link

Next, we use CSS to do the manipulation

CSS

ul {

  list-style-type: none;

  margin: 0;

  padding: 0;

  overflow: hidden;

  background-color: #333;

}

li {

  float: left;

  padding: 10px;

}

li a {

  display: block;

  color: white;

  text-align: center;

  padding: 10px 10px;

  text-decoration: none;

 border-radius: 10px;

}

li a:hover:not(.active) {

  background-color: #111;

}

.active {

  background-color: #4caf50;

}

At the end of the day, we should have something like this after adding those styling

default links with active link

Having your nav links with such nice hover and active effect will sure give your navigation menu  a much more eye catching design however, the main aim is to give your site visitor the notion of the active link, with that in mind, I did like to add that the code above is a simple code for a few list of nav links, there might be situations where you have more complex nav links, the same styling can also be applied.

Leave a Comment

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