Bold an active link in meteor

Question

I have this code in my navigation bar in Meteor and I'm trying to bold the link when it's active. I've tried using CSS and a:active {} but that doesn't seem to work.

<div class="navSecondary">
    <div class="menu" align="center">
        <ul class="menu-items">

            <li class="active">
            <a href="{{pathFor 'home'}}"> HOME </a></li>
       </ul>
    </div>
</div>

Answer 1

To bold the navigation link on a current page first install the zimme:iron-router-active. This should create a class called "active" when an item is clicked.

Then in your html navigation html for example, type in {{ isActiveRoute 'home'}}. This means that when home is clicked, it will change the class from whatever it was before to a class called "active"

<li class="{{ isActiveRoute 'home'}}">
            <a class="home" href="{{pathFor 'home'}}"> HOME </a></li>

Finally in your CSS type:

   .active a {
        color: black;
    }

    .menu .active a {
        color: black;
        font-weight: bold;
    }

This should produce a result of bolding the current navigation bar.