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.
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.
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.
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.
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...
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
Yes,That is great! Exactly what I am looking for. Thank you!!
#nav > ul li {
//general styling
}
#nav > ul > li {
//only toplevel li-tags
}
#nav li.has-dropdown ul li {
//only second level li-tags
}