How to modify navigation bar

Question

How do I make the navigation bar make the selected page be a different color than the other tabs? I am using Xenforo so it uses xenforo code, HTML, and CSS.

I am okay with HTML and CSS however I do not know how to do this.

Thanks in advance,

Trevor

Answer 1

You can do this easily with CSS. If your navigation looks something like this:

<ul class="nav">
  <li class="active">Home</li>
  <li>Page 1</li>
  <li>Page 2</li>
</ul>

Then all you have to do is change the style for the "active" item, like this:

.nav li {
  //regular style
}
.nav li.active {
   //do something different!
   color: red; //change the color to red
   background-color: #999; //change the background color to light grey
}

You just have to set the class="active" for each page to mark which page you're on.