How to make active menu item with highlight style?

Question

I wish to make the active menu item highlighted with a coloured square.

.main-menu ul {
  padding: 0px;
  margin: 0px;
  text-align: center;
}

.main-menu li {
  list-style: none;
  display: inline-block;
  padding: 40px 0;
}

.main-menu a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-right: 5px;
  padding: 5px 5px;
  margin: 0;
  border-radius: 3px;
  /*color: #fff;*/
  line-height: 24px;
  display: inline-block;
}

.main-menu a:hover {
  background-color: #F78E21;
  color: #fff;
}

<div class="main-menu">
  <ul>
    <li><a class="active" href="index.html">Home</a></li>
    <li><a href="about-us.html">About Us</a></li>
    <li><a href="products.html">Projects</a></li>
    <li><a href="contact-us.html">Gallery</a></li>
    <li><a href="contact-us.html">TV Appearances</a></li>
    <li><a href="contact-us.html">Events</a></li>
    <li><a href="contact-us.html">Links</a></li>
    <li><a href="contact-us.html">Testimonials</a></li>
    <li><a href="contact-us.html">Contact Us</a></li>
  </ul>
</div>

score 1 · Accepted Answer · edited Jan 03 '20 at 17:05

1

Is it it?

.main-menu a:hover,
.main-menu a.active{
    background-color: #F78E21;
    color: #fff;
}

If don't actually have the class="active" and asking how to add it for each page dynamically, that would be a big question. Well, if it is all static code then just manually add it on each page. If it's in a CMS, then look for solutions for that platform. If you're looking for Javascript solutions, check out this post jQuery add class .active on menu

edited Jan 03 '20 at 17:05

Jens

69,818
15
125
179

answered Mar 20 '15 at 17:57

Stickers

75,527
23
147
186

Thank You. works a treat. I have been trying various combinations for ages and you have done it in a few minutes, never occurred to me to merge the hover and active together! Thank you very much! – Peter Foster Mar 20 '15 at 18:06

score 0 · Answer 2 · answered Mar 20 '15 at 18:06

Try this sample of code. Hope this help.

HTML Snippet

<div class="main-menu">
 <ul>
 <li><a class="active" href="#">Home</a></li>
 <li><a href="#">About Us</a></li>
 <li><a href="#">Projects</a></li>
 <li><a href="#">Gallery</a></li>
</ul>

JS Code

$(function(){
   $('ul').on('click','a', function(){
      $('a').removeClass();
      $(this).addClass('active');
   });
});

CSS Styel(Add this into your css section-you can change whatever style you want)

.active{
  border:1px solid red;
  color : red;
}

How to make active menu item with highlight style?

2 Answers2