Forum

Thread tagged as: Question

Set active navigation based on catSlug?

This might be a general coding question (if so happy to repost to stackoverflow) - but I have posted it here as it comes up many times in my perch websites.

Can I set the active class on my <li> navigation based on the catSlug - and if so what is the best way to do this.

EG I have

<li><a href="index.php?cat=case">CASE STUDIES</a></li>
<li><a href="index.php?cat=news">NEWS</a></li>
<li><a href="index.php?cat=blog">BLOG</a></li>

and I want to set <li> to active depending on whether (perch_get('cat') == 'case') or 'news' or 'blog'

I know I should probably be using perch navigation - but is there a way to do this without?

https://galvininternational.com/blog/index.php?cat=case

Many thanks

cow shed 0 points

6 years ago

Alex Lewer 3 points

6 years ago

You could do something like this:

<li><a href="index.php?cat=case"<?php if (perch_get('cat') == 'case'){echo ' class="active"';};?>>CASE STUDIES</a></li>
<li><a href="index.php?cat=news"<?php if (perch_get('cat') == 'news'){echo ' class="active"';};?>>NEWS</a></li>
<li><a href="index.php?cat=blog"<?php if (perch_get('cat') == 'blog'){echo ' class="active"';};?>>BLOG</a></li>

Alex

cow shed 0 points

6 years ago

Thank you SO much.

I had to move the php string inside the <li> to make my css work, but now its looking fab! Hooray!