Question

I have a question about my menu. I have a menu with 6 items, which I want to give a different colour if they are ACTIVE (so in use by my users). I tried this already:

<nav id="sub-navigation" class="toggles-menu">
<ul id="quick-index-nav" role="navigation" class="pills slim muted">
<li>
<a id="qindex-day">abc</a>
</li>
<li>
<a id="qindex-day">random</a>
</li>

<li<? if(!$_GET['t']||$_GET['t']=='') echo ' class="active"';?>>
<a id="qindex-popular" target="right" href="right.php">all of them</a>
</li>
<li<? if($_GET['t']=='tod') echo ' class="active"';?>>
<a id="qindex-today" target="right" href="right.php?t=tod">today</a>
</li>
<li class="yesterday<? if($_GET['t']=='yes') echo ' active"';?>">
<a id="qindex-yesterday" target="right" href="right.php?t=yes">yesterday</a>
</li>
<li<? if($_GET['t']=='mix') echo ' class="active"';?>>
<a id="qindex-day" target="right" href="right.php?t=mix">samba</a>
</li>
</ul>
</nav>

CSS:

.pills>li.active>a{color:#fff}
.pills.slim>li>a{padding:3px 5px;}
.pills.muted>li>a{color:gray}
.pills.muted>li.active>a{color:#fff}

But this won’t work. It makes nothing active if I click on them.

Answer 1

You need to add styles to your page, either via an external stylesheet or embedded in a style tag directly in the page.

CSS:

li.active a{
    color: red; // for example
}

You can also use inline styles:

<li<? if(!$_GET['t']||$_GET['t']=='') echo ' style="color: red;"';?>>

It will work but is not recommended.