Change color/ background of current active page in navigation bar

Question

I'm designing my mobile website and using big tabs for navigation links, how can I show which page the user is currently on e.g the link background is red for example, without manually changing the css on each link per separate page.

My page uses a server side include using PHP for my header which includes my navigation. How can I add a class to separate pages this way?

I suggest you to use [Twitter Bootstrap](http://twitter.github.com/bootstrap/) for responsive layouts — Hary, Jan 28 '13 at 17:36

score 2 · Answer 1 · answered Jan 28 '13 at 17:24

2

You can do it using pure CSS.

Watch these reference videos.

Part - 1 Part - 2

Hope it helps.

answered Jan 28 '13 at 17:24

Ankur Sinha

6,473
7
42
73

For small statics sites, this can be applied. Else becomes tedious for Dynamic Sites, you need to opt for jQuery then. – Ankur Sinha Jan 28 '13 at 17:24
The above concept is for Nav Bar, but you can get the concept from here, pretty much the same. – Ankur Sinha Jan 28 '13 at 17:25
The website will only have about 5/6 pages max, so maybe I should apply a class if it is the easiest way – Jonathan Lockley Jan 28 '13 at 17:28
If it's only 6-7 pages, then you can go ahead with the above video concepts. – Ankur Sinha Jan 28 '13 at 17:31

Change color/ background of current active page in navigation bar

1 Answers1