1

I'm using EE2.5 with structure. I have a simple nav:

{exp:structure:nav current_class="selected" start_from="/" show_depth="2" include_ul="no"}

I have a channel: photos

I have a Category Group: photograph and this Category Group has categories

Each entrie from photos get assign to an categorie

I have a unique template "ovezicht" to show the categories from channel "photos" and when I click on a "category_image" I see all the photos assign to this category.

overvieuw categories

{if segment_3 == ""}

{exp:channel:categories channel="photos" style="flat"}

<a href="{path='overzicht'}"><img src="{category_image}"></a> 

{/exp:channel:categories}

{/if}

(This is the url when watching the categories: .../uitleen/overzicht/)

photos from a selected categorie

{if segment_3 != ""}
{exp:channel:entries channel="photos" disable="member_data" limit="1" paginate="bottom"}
<div class="col_left">
<img src="{foto_image}" alt="">
</div>

<div class="col_right">
{naam_fotograaf}<br />
{title} | {jaartal}<br />
{formaat}<br />
{prijs}<br />

</div>

<!--  PAGINATION   -->

 {paginate}

  {pagination_links}

{/paginate}  

<!--  E.O. PAGINATION   -->

{/exp:channel:entries}
{/if}

(This is the url when watching the photos from a selected categorie: .../overzicht/fotograaf/francois-morfouace)

NOW MY PROBLEM

When I view photos from a selected categorie the menu item has no more the class selected in the nav.

1

If you're outside of the Structure hierarchy, we have no way to have the here state on the nav item.

0

If I'm understanding the issue, something like this should work:

<a href="{path='overzicht'}" {if segment_3 == "{category_url_title}"}class="selected"{/if}><img src="{category_image}"></a> 

This will add a class of "selected" to the active category.


If you are wanting to make sure the main navigation item is selected, changing your code slightly and adding come custom CSS will do the trick.

First, add add_unique_ids="yes" to your structure:nav tag like so:

{exp:structure:nav add_unique_ids="yes" current_class="selected" start_from="/" show_depth="2" include_ul="no"}

This will add a unique id to the navigation li tag. You'll need to look at the rendered code to determine the ID that is used.

Then, add something like this to your body tag:

{if segment_1 == "overzicht"}id="overzicht-body"{/if}

Then add CSS to style the nav item... something like:

#overzicht-body #NAME_OF_UNIQUE_ID {
    CSS for your "selected" state
}

OR

#overzicht-body #NAME_OF_UNIQUE_ID a {
    CSS for your "selected" state
}

You'll need adjust the CSS to match your rendered html code...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.