Posted 11 months ago #
What is the best way to build a menu that can have different css classes on the menu (ie. current) for which page it is on.
Basically I just need to know how to make a menu and what the php codex is with the idea of having selected / current menu items.
I have been looking at this but it doesn't seem to explain it in simple terms: http://codex.wordpress.org/Dynamic_Menu_Highlighting
Any help? Thank you
What is the best way to build a menu that can have different css classes on the menu (ie. current) for which page it is on.
http://codex.wordpress.org/Function_Reference/wp_list_pages
http://codex.wordpress.org/Function_Reference/wp_page_menu
http://codex.wordpress.org/Function_Reference/wp_nav_menu
Posted 11 months ago #
Thank you esmi I'll take a look.
Posted 11 months ago #
Thats great esmi. I placed
<ul class="menu">
<li><?php wp_nav_menu(); ?></li>
</ul>in my header.php and titled the class menu as thats what the css refers to. But all the styling isn't there. Any help?
Posted 11 months ago #
Sorry the styling is there as I forgot to place it in the nav wrapper. But the text is massive and the home button and another button don't have there seperate styling on for example the home button has an image next to it so it has a different class in its <li></li>. Any help?
Here is an example of the original menu without the links in place.
[Code moderated as per the Forum Rules. Please use the pastebin]
Posted 11 months ago #
Here is my example... Thank you Forum Rules for making me waste 5 mins of my time doing that for a simple piece of code to show. But here it is...
Sorry the styling is there as I forgot to place it in the nav wrapper. But the text is massive and the home button and another button don't have there seperate styling on for example the home button has an image next to it so it has a different class in its
<li></li>
You now need to start editing your theme's CSS.
Posted 11 months ago #
I built the site before I started with it in wordpress. It was a last minute decission to have it in a simple cms. But grew from there. So the styles for the menu are already there.
Just need to figure out why the text is so big when I place it in
<ul class="menu">
<li><?php wp_nav_menu(); ?></li>
</ul>instead of a normal menu list and how to style the individual list items. I know how to do that normally but as its in the code above, I can't see how.
Here is the code again. http://pastebin.com/dJ5SyiuS
Any help? Any takers? Thank you :)
So the styles for the menu are already there.
In that case, you need to change/rewrite that CSS. I'd recommend using Firefox and the Firebug add-on for this kind of work.
Posted 11 months ago #
Why would I need to change the css, its already there and using web developer and firebug just shows me the styles that are already there.
If I place in this http://pastebin.com/dJ5SyiuS code then I get it as it should be styled up.
If I place the menu as <ul class="menu"><li><?php wp_nav_menu(); ?></li></ul> then I get it in its box, with the correct font each in its individual box as it should be but the text is larger and i am missing the individual list item elements.
So there will have to be another way but unsure how?
Posted 11 months ago #
I would normally just keep it as a html list as http://pastebin.com/dJ5SyiuS but I want to keep it more wordpressy and I want to have each page when visited to have its current state on that menu list item.
Why would I need to change the css
Do you want a dynamic menu or not? If yes, then you need to start styling your menu using the generated classes and not your own, previous. CSS.
Posted 11 months ago #
Yes I do. But I have fixed it anyway... sort of...
I have realised what I have done wrong. I placed in:
<ul class="menu">
<li><?php wp_nav_menu(); ?></li>
</ul>But I didn't need the <li></li> in there so I took it out like so:
<ul class="menu">
<?php wp_nav_menu(); ?>
</ul>Now the text is correct and the styling using my original styling is all there except one thing. Needing it to be dynamic I need to style individual list items, looking at the above code, it obviously can't be done with that. So how do I change that to have individual stylings. Here is an example of the html:http://pastebin.com/dJ5SyiuS.
Any help?
Posted 11 months ago #
Needing it to be dynamic I need to style individual list items, looking at the above code, it obviously can't be done with that. So how do I change that to have individual stylings.
The wp_nav_menu() function outputs classes for the current list item, as well as for hierarchical menu entries (parent, ancestor). You can target these classes for highlighting current context.
Also, if you need to add arbitrary CSS classes to specific list items, you can do so from Dashboard -> Appearance -> Menus. Select a custom menu, and then edit the individual list item for which you want to add an arbitrary class. Look for the "CSS Classes" field.
(Note: you may need to enable display of the "CSS Classes" field, by clicking the "Screen Options" tab in the upper right-hand corner, and enabling the "CSS Classes" checkbox.)
Posted 11 months ago #
(Note: you may need to enable display of the "CSS Classes" field, by clicking the "Screen Options" tab in the upper right-hand corner, and enabling the "CSS Classes" checkbox.)
Thats what I was looking for!! Thank you :)
Now I can edit the individual list items!
I have done that now but now the next problem is:
When on a page, I wish to have a current or selected state on that menu item. Is this possible?
[No bumping, please - especially after only 14 minutes!]
Posted 11 months ago #
When on a page, I wish to have a current or selected state on that menu item. Is this possible?
In this case, you have the current-menu-item CSS classes that you can target for styling.
Note that if you use hierarchical pages, you'll also have current-menu-parent and current-menu-ancestor to target.
Posted 11 months ago #
Sorry. How would I do this?
Would I place it in the 'CSS Classes (optional)' area? and if so this may replace some of the css classes on the individual list items that I have them on.
:) Thank you
Posted 11 months ago #
Sorry. How would I do this? :) Thank you
This one is just straight-forward CSS. :)
.current-menu-item {
/* CSS class for current menu items; add style definitions as needed */
}Or you may want to target the link itself:
.current-menu-item a {
/* a link inside of the current menu list item */
}
Posted 11 months ago #
Oh I see. Thank you.
I already have those classes in there but they are called .selected. So all I need to do is change them to .current-menu-item or .current-menu-item a.
Ill try this now. thank you
Posted 11 months ago #
Worked perfectly. Topic Resolved. Thank you everybody!!
Posted 11 months ago #
Awesome! Cheers. :)
Posted 10 months ago #
Hello. Sorry but I am opening this subject again. I have another problem.
I wish to create a sub menu on a page. Here is the code:
<ul class="sub-menu">
<?php wp_nav_menu(sub-menu); ?>
</ul>Simple. But when I refresh the page I am getting the main top menu in its place and not the sub menu I have created. Any help? thoughts? etc?
Thank you and beyond...
Posted 10 months ago #
Hello. Sorry but I am opening this subject again. I have another problem.
I wish to create a sub menu on a page. Here is the code:
<ul class="sub-menu">
<?php wp_nav_menu(sub-menu); ?>
</ul>Simple. But when I refresh the page I am getting the main top menu in its place and not the sub menu I have created. Any help? thoughts? etc?
Thank you and beyond...
Please post a new topic. And stop bumping!
Posted 10 months ago #
Please post a new topic. And stop bumping!
And waste space?! Why not keep the same topic continuing and open it if further developments are needed or further questions related to the same topic?
I personally would prefer it this way instead of filling the board with new topics relating to previous topics.
Im sure this makes more sense. Don't you think?
Posted 10 months ago #
Esmi. Thanks for bumping the topic up, really trying to get someone to respond with an actual answer or discussion on my topic.
This topic has been closed to new replies.
