How to add custom classes to navigation
Permalink
Problem: I would like to add a custom class name to certain <li> within my primary site navigation.
Example: change <li>About</li> to <li class="about">About</li>
I have been using the following global to display my nav within 'elements/header.php' in the Plain Yogurt theme:
$a = new GlobalArea('Header Nav');
$a->display($c);
Any advice or links to a similar thread that I couldn't find would be great. Thanks in advance.
Example: change <li>About</li> to <li class="about">About</li>
I have been using the following global to display my nav within 'elements/header.php' in the Plain Yogurt theme:
$a = new GlobalArea('Header Nav');
$a->display($c);
Any advice or links to a similar thread that I couldn't find would be great. Thanks in advance.
You want to add different class to each menu element, or just add one class to those elements?
Either or would be fine for me. Even if it took the page title and created a class from it would be good.
I have a template for the auto-nav block that includes this feature (kind of -- it uses the page id number instead of name, because you could have two pages with the same name):
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
http://c5blog.jordanlev.com/blog/2011/12/customizing-the-autonav-te...
Jordan, I will give this a whirl. Thanks for the post. It seems to me like this functionality should be in the core as it is quite a common need (at the very least an option)
I do hope to replace the core template with this when I have the time, but more for the ease of customization (the code is a lot cleaner than the mess of spaghetti in the core template).
Putting different classes on different menu items is actually not a common thing to do -- the point of a CMS and an auto-generated menu is to have a system where users can add new pages and rearrange the order whenever they want, without having to call up a designer or developer to make changes. As such, the primary navigation menu should really be designed with flexibility in mind, and not have "hard-coded" styles.
Putting different classes on different menu items is actually not a common thing to do -- the point of a CMS and an auto-generated menu is to have a system where users can add new pages and rearrange the order whenever they want, without having to call up a designer or developer to make changes. As such, the primary navigation menu should really be designed with flexibility in mind, and not have "hard-coded" styles.
