Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

PHP Building Websites with PHP Slim Basics & Twig Templates Layouts with Twig

Lee Ravenberg
Lee Ravenberg
10,018 Points

Active page graphic sticks to 'About'

When moving the entire header section of the site to main.twig, the menu item's active page sticks to the 'About' page. Because of this: <a href="index.html" class="selected">About</a>.

What can I do within Twig to make dynamically decide what will be highlighted as active page?

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

I seem to have the same problem. Hopefully the next video sorts it out. It is something to do with the selected class. There must be a way to switch between the two I'm guessing. Please let me know if you find a solution.

1 Answer

Hi, I solved the problem like this:

In the main.twig file edit the anchor elements classes like this:

class="{% if title == 'about' %} {{ 'selected' }} {% endif %} - in the about link

class="{% if title == 'contact' %} {{ 'selected' }} {% endif %} - in the contact link

And at the top of pages about.twig and contact.twig add this code right before the {% extends 'main.twig' %}:

{% set title = 'about' %} in about.twig

{% set title ='contact' %} in contact.twig

Hope it works for u to :)