RWSmith Designs.

Extraordinary Web Design

How to style a permalink in a nav that is currently open

A great method to let our visitors know what section of the website they are visiting is to style the currently open link in the navigation.
Let’s start by looking at the CSS link and it’s pseudo selectors:

It can be easy to assume the active pseudo selector will target the current page but it doesn’t, it in fact is activated when the link is pressed / clicked.
So there is no direct way or targeting the link through CSS.

Well that is true and leads many designers to look to Javascript or server side solutions.

Here I will show you an easy method that can be done directly through HTML and CSS.

For each page that you wish to apply this to you should set a class for the body tag for example in the homepage you can set it to “home”. In the events page set it to “events”

In your navigation you should then apply the same style to your permalinks.

Now in the CSS file you can easily target the permalink for the current page using the body class combined with a matching link class.

It’s as simple as that. No requirement for Javascript or server side code!

Comments

Leave a comment

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

RWSmith designs Extraordinary Web Design

Do you have a project in mind?

I’m currently available for freelance and accepting new project requests.

Contact meSee my process