Forum
Navigation Styling & CSS
Good Evening,
I could do with some help regarding a few issues i have with the navigation.
1, CSS - it seems only my main active menu item is picking up the styling i have applied and not the other top level items.
uk-active uk-width-1-4 and my other top level menu items should have uk-width-1-4 class.
MENU CODE:
<perch:before>
<ul class="uk-navbar-nav uk-width-1-1">
</perch:before>
<li<perch:if exists="current_page"> class="uk-active uk-width-1-4"</perch:if><perch:if exists="ancestor_page"> class="uk-width-1-4"</perch:if>>
<a href="<perch:pages id="pagePath" />"><perch:pages id="pageNavText" /></a>
</li>
<perch:after>
</ul>
</perch:after>
2, When selecting a sub item the top level loses it's active state, any ideas why this happens?
CODE:
<?php
perch_pages_navigation(array(
'from-path' => '/visual-identity',
'template' => 'sidenav1.html',
));
?>
Thanks in advance! Alec
When you click down below an active page, that page becomes an ancestor page.
Hi Drew,
Thank you for that, may you help with my css issue?
As you can see the Home item gets the styling but the Visual Identity is missing its styling width (class="uk-width-1-4")
Regards
We can only help with Perch, not your CSS.
Hi there,
Its not my CSS i have the issue with. It is the navigation of perch not applying the class. to all other top level items i require help with.
Regards Alec
Ok, what HTML are you getting, and what should you be getting?
Hi Drew,
Thank you for your prompt replies, much appreciated :)
This is the code it outputs, you can see my menu and perch tags in my opening post.
Home item is perfect it receives the class of uk-active but the Visual Identity item does not get a class applied to it. That is the issue i face :(
Regards
In your template, there's only two circumstances when that class gets applied; if
current_pageis true or ifancestor_pageis true.If you always want the class, you just need to make sure it's outside of those if tags.
Drew,
You are a legend, thank you so much for your help with that.
Could you help with me why the active state does not stay active on the main nav when on a sub page?
Regards Alec
When you click down below an active page, that page becomes an ancestor page.
Hi Drew,
Is there a way to target both the main nav and the sub with my active state css class?
Regards Alex
Yes!
Hi Drew,
Once you mentioned ancestor page i solved that one :)
Thank you once again for your support
Regards Alec