Hi,

I'm looking for a way to style the currently active page in my site's main navigation. I installed the Menu Manager plugin but because my navigation menu is pretty specific I found it wasn't suitable.

My navigation menu is contained in my header.htm partial and looks like this:

<div id="navbar" class="collapse navbar-collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="{{ 'home'|page }}">Home</a></li>
        <li><a href="{{ 'dam-search'|page }}">Dam Search</a></li>
        <li><a href="{{ 'projects'|page }}">Projects</a></li>
        <li><a href="{{ 'news'|page }}">News</a></li>
        <li><a href="{{ 'contact'|page }}">Contact</a></li>
        <li><a class="btn btn-default btn-outline search-btn collapsed"  data-toggle="collapse" href="#navSearch" aria-expanded="false" aria-controls="navbar">Search</a></li>
    </ul>
    <div class="collapse nav navbar-nav nav-collapse slide-down" id="navSearch">
        <div class="search-container">
            <form class="navbar-form" role="search">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search Dams" title="Search by Name, Country, Height or Length" aria-describedby="search dam database" id="damSearch" />
                    <span class="input-group-btn">
                        <button class="btn btn-success" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                    </span>
                </div>
            </form>
            <a href="{{ 'dam-search'|page }}">Advanced Search</a>
        </div> <!-- /.search-container -->
    </div>
</div> <!-- /.navbar-collapse -->

The only chunk of code relevant to this post is the unordered list at the start. As you can see I've inserted code to add a class of 'active' to the Home list item, and it's that class which I'd like to add to each of the pages depending upon whether they are the active page or not. Is there some code I can add that would check if the linked page is the current page and if so add the 'active' class to it?

Thanks in advance for any help and advice.

Tony.

Last updated 8 years ago

Here is one way to do it...

<ul>
    <li {% if this.page.id == 'home' %}class="active"{% endif %}>Home</li>
    <li {% if this.page.id == 'dam-search' %}class="active"{% endif %}>Dam Search</li>
    <li {% if this.page.id == 'projects' %}class="active"{% endif %}>Projects</li>
    <li {% if this.page.id == 'news' %}class="active"{% endif %}>News</li>
    <li {% if this.page.id == 'contact' %}class="active"{% endif %}>Contact</li>
</ul>

The documentation talks about this.page and all the things you can do with it, good luck!

Last updated 8 years ago

Thanks Scott. That worked perfectly :)

Many thanks for your help. I'll read up on that documentation link you supplied.

Hello fellow coders, Followed Scott tip and worked like a charm... BUT my last link BLOG doesn´t... Please advice??

If there is already a class you can do this:

<li class="nav-item {% if this.page.id == 'om' %} active {% endif %} ">

Seems to work, but I wonder if it will sometime break.

Last updated 5 years ago