How to highlight the page navigation button?

Get Started
1

Hi there,
I’ve just started to design my website using CSS to control the layout. Does anybody know how to use css to highlight a particular navigation button to show that you are currently on that page? For example I got Home, About Us, Products…etc and when I go to About Us page, I want the “About Us” button to be highlighted in different colour.

All my navigation buttons are in navigation div so I’m not sure how to change that one particular button based on the page you are on. I will really appreciate it if somebody can help me asap. thanks in advance.

cheers!

2

Add a class to the body that matches the page you’re on. For instance, on the about page use

<body class="about">

Now add an ID to each of your nav links which also ties it to the page, for instance

<a id="about" href="/about/">About</a>

Now in your CSS add a rule for each page/link as follows:

body.about #nav #about,
body.contact #nav #contact,
body.home #nav #home
{
  /* Add your active styles here */
  color: #cc0000;
  font-weight: bold;
  }
3

Thanks! really appreciate it. :slight_smile:

4

That’s one way to do it. Here’s another, slightly different method that doesn’t require a BODY class:

Create an “active” class for the link you want highlighted in your HTML list:

[highlight=“HTML Strict”]<ul id=“navlist”>
<li id=“active”><a href=“#” title=“Home Page”>Home Page</a></li>
<li><a href=“#” title=“Links”>Links</a></li>
</ul>



Where your navlist has one color for the link in your stylesheet:


```css
ul#navlist li a {
color: #fff;
}

your active link has a different color:

ul#navlist li#active a {
color: #000;
}

(and of course, you can make all kinds of differentiations, especially if you’re using link buttons instead of just text)

On the Links page, just flip the linked ID:

[highlight=“HTML Strict”]

```

As I said, not that much different from AWestmoreland’s. Someone correct me if I let an error slip in.

5

Thanks alot, I’m so glad that I have signed up this forum with many helpful people around.

cheers!

6

sometimes I’m a bit confused on when to use id or class. I know that one document cannot contain more than one same id but in this situation, id and class will work the same way right?

7

KSNG, there are two things to remember about IDs versus classes:

1: IDs can only be used once in a page. Classes can be used as many times as you like.
2. IDs have much more precedence in a stylesheet “cascade” than classes.

Other than that, they work pretty much the same way.

In the example I did above, if I wanted two or more instances of that “navlist” on a single page, I’d change the ID to a class. Same if I wanted more than one link to display as “active,” though I’ve never seen a situation crop up where I wanted that.

8

Thanks Black Max.:slight_smile:

9

It’s not a perfect explanation, but it’ll get you through…

Tommy and Paul’s guide will give you a better and more precise explanation.

10

In this case i usually use a class instead of an id.