Menu icon Foundation
Using ifpage to set Active isn't working

Hey everyone, I'm a newbie and am just trying to figure things out. After watching quite a few of the videos, Rafi mentioned the use of the ifpage helper can help set the links in the top bar to active depending on what page you're currently on. What am I messing up here?

<div class="top-bar">
	<ul class="top-bar-left menu">
		<li><a href="index.html" class="{{#ifpage 'index'}}active{{/ifpage}}">HOME</a></li>
		<li><a href="projects.html" class="{{#ifpage 'projects'}}active{{/ifpage}}">PROJECTS</a></li>
		<li><a href="team.html" class="{{#ifpage 'team'}}active{{/ifpage}}">TEAM</a></li>
	</ul>
	<div class="top-bar-right">
		<a href="index.html"><img src="assets/img/logo.png" alt="Notefest"></a>
	</div>
</div>

 

activeifpagehelperpanini

Hey everyone, I'm a newbie and am just trying to figure things out. After watching quite a few of the videos, Rafi mentioned the use of the ifpage helper can help set the links in the top bar to active depending on what page you're currently on. What am I messing up here?

<div class="top-bar">
	<ul class="top-bar-left menu">
		<li><a href="index.html" class="{{#ifpage 'index'}}active{{/ifpage}}">HOME</a></li>
		<li><a href="projects.html" class="{{#ifpage 'projects'}}active{{/ifpage}}">PROJECTS</a></li>
		<li><a href="team.html" class="{{#ifpage 'team'}}active{{/ifpage}}">TEAM</a></li>
	</ul>
	<div class="top-bar-right">
		<a href="index.html"><img src="assets/img/logo.png" alt="Notefest"></a>
	</div>
</div>

 

This post has been closed. No new replies can be added.

Rafi Benkual over 2 years ago

the structure looks right! 

What is not working?

Are you using this on a ZURB Stack Sass project?

Seeing any errors in the command line?

Do you see the class being added in the inspector?

Lyndsay Clark over 2 years ago

I am on the ZURB Stack Sass project and still getting adjusted to the _settings.scss and everything that can be customized in there. Not seeing any errors in the command line, but noticed in the inspector it's not even showing the class. This is how it looks:

<a href="projects.html" class="">PROJECTS</a>

 

For quick testing, I adjusted the home link to be just "active" without the ifpage helper and that did show up.

Lyndsay Clark over 2 years ago

Never mind! I got it figured out. Syntax error on my part!

 

Thanks!