Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

PHP

Posted by Joe Shiels
Joe Shiels
19,933 Points

Navigation Bar on PHP website.

After completing the 'Building a Website with PHP' course, the navigation bar still shows that the About page is active when on the Contact page, is there any way to change this using twig?

3 Answers

Greg Kaleka
Greg Kaleka
39,021 Points
Greg Kaleka
Greg Kaleka
39,021 Points

Can't help you without seeing your code!

Even better would be to share your workspace.

Joe Shiels
Joe Shiels
19,933 Points

Here is the twig code for the navigation.

    <header>
        <h1>Ralph Waldo Emerson</h1>
        <nav>
            <a href="{{ baseUrl() }}" class="selected">About</a>
            <a href="{{ siteUrl('/contact') }}">Contact</a>
        </nav>
    </header>
Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

There is a way, but they left that for us to figure out in the course. I have not taken the time to do it myself. But, if you look at the Shirts for Mike example, they do it there. The concept should be a great guide on how to do it in Slim and Twig.

Kristin Berlehner
Kristin Berlehner
26,734 Points
Kristin Berlehner
Kristin Berlehner
26,734 Points

Hey Joe, not sure if you found an answer yet. I was hoping someone found one. This worked for me, even though I'm sure there is a better way.

On each template I included... 

{% block aboutselected %}
selected
{% endblock aboutselected %}

and 

{% block contactselected %}
selected
{% endblock contactselected %}

Then I did this to my navigation... 

<nav>
    <a href="{{ baseUrl() }}" class="main-nav {% block aboutselected %}{% endblock aboutselected %}">About</a>
    <a href="{{ siteUrl('/contact') }}" class="main-nav {% block contactselected %}{% endblock contactselected %}">Contact</a>
</nav>

This worked for me, but I'm sure there has to be a better solution. Seems like redundant code to me.