Auto Nav styling

Permalink
Hello again!
I am searching for solution about my problem:
I am using Auto Nav in my theme (I am converting HTML layout into C5 theme). The navigation has a similar tree:
<ul>
<li></li>
<li></li>
...
<li class=''>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>

This is a menu with submenu one level depth. So I want to add styling to <li> element that contains submenu. By default every <li> element in Auto Nav has an empty style.

View Replies: View Best Answer
A3020 replied on at Permalink Reply
A3020
You can use the direct child selector:

#nav > ul li {
//general styling
}

#nav > ul > li {
//only toplevel li-tags
}

#nav li.has-dropdown ul li {
//only second level li-tags
}
drbiskit replied on at Permalink Best Answer Reply
drbiskit
Try using this super useful custom template file that jordanlev put together for the autonav block:
http://www.concrete5.org/community/forums/themes/custom-class-for-e...

It adds a custom class to each li in your autonav markup - utilising the collection (page) id in each case.

Download the linked file in jordan's post, and add it here (you'll need to create a new directory if not already present):
blocks/autonav/templates/list_item_classes.php

Then put the page in edit mode, click on the auto nav block and select 'custom template' from the menu. 'list item classes' should be one of the options - select it, and save.

Then look at your generated code, find out what the class is for that li, and write out some css for it.
bryanlewis replied on at Permalink Reply
bryanlewis
I agree with drbiskit.. Here is the link to his tutorial. I hope it helps out a bit.
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
ljubo replied on at Permalink Reply
Yes,That is great! Exactly what I am looking for. Thank you!!