Highlight Current Page in Navigation

Advanced Tutorial: This tutorial assumes a good understanding of CSS & HTML.

Navigation example:

Looking at the example above, you'll notice the Home button looks different from the other links. Many websites highlight the current page link to make it easier to see which page you're on. Doing this requires some advanced knowledge, but if you already have a basic understanding of CSS, this tutorial can help you do it.

There are two methods of making this happen. The Javascript method and the HTML method. Which one you choose depends on the size of your website, who will be editing it, and if the website has sub-categories.

Javascript/CSS Method

This is the best way to go for customer projects because it's easy to maintain doesn't require special work when building new pages.

The Javascript method checks the address of the current page and adds a class named "current" to any link on the page that matches whats in the address bar.

Here's the Javascript:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
      $(this).addClass('current');
    }
  });
});
</script>

You won't see any visible change in the navigation yet. All it's done is add a class named "current" to any links that have the same address as the current address. To change the way it looks, you will need to add CSS code. Below is a simple example of how to style the links.

CSS Code:

The Result will look like this... Read about how to Highlight your current page.

Often you'll only want this applied to the main navigation. To accomplish this, you need to be more specific with your CSS....

The HTML/CSS Method

This approach is a great approach for category-based websites. EZNETU.COM uses this technique. If you look the main navigation you'll notice this page has Tips & Tricks highlighted to show that your in the Tips & Tricks category.

The javascript example above would not highlight the Tips & Tricks link unless you were actually on tips-tricks.html (which in this case isn't what we want).

The Basic Idea

The HTML/CSS method puts classes on our links and a class on our body tag.

There is a class on the body of this page called "tips-tricks" and another class on the link called "tips-tricks". (the classes don't actually need to be the same but using the same class names makes it easier to remember).

Then our CSS looks for a link with a class of tips-tricks inside of a class of tips-tricks. The CSS looks like this...

The actual CSS for our website is more complex than that, but this is the general idea.

Step-By-Step Tutorial

1. Create your navigation. Add classes to each link as follows:

2. In the home page choose File >Page Options. Then in the box labeled Body Tag Code type: class="home". Then do the same for the other pages (i.e. class="about", class="products" ).

3. Write CSS code like the following:

The CSS looks for a link with a class home inside of a container with the class home and then applies the style to it. If you had several product pages, you would simply put class="products" in the Body Tag Code of those pages.