But what about in the twentyten theme?…
The solution of using Page Lists Plus seems to be an alternative to using the appearances->menu functionality in wordpress 3. If I want to stick with that simple solution…. is there a way for me to unlink top level items so that only the items in the sub-menu link to pages?
Any help greatly appreciated.
Yes
There are additional options you can display on each page that allow you to do what you are asking for.
Go to the main Page Links Plus admin page, Dashboard menu (its either under tools or settings). You can turn on the display of additional fields on each page.
Thank you. I guess my question is:
Is Page Links Plus a suitable add-on to WordPress 3’s way of dealing with menus which I appreciate for its simplicity or are they two different ways of doing it altogether?
Page Lists Plus uses the older wp_list_pages way of making menu. Its all in code. As far as I know it has not been updated to work with the WP menu nav system. Behind the scenes the menu system uses a very different approach than the older wp_list_pages does.
As far as making a top level Nav element that links to nothing, I looked and couldn’t find a built in way to do that. When I built menus in code and before I found Page Lists Plus, I used to accomplish that by having the top level item link to href=”#” which points the page back at itself.
Also, adding cursor: default to the CSS for the top level element removes the pointer cursor when the field is hovered over. It is still a link but it doesn’t look like a link to the user. And if it is clicked it stays on the same page.
There may be a way built in to the menu system to accomplish this but I didn’t find it in a quick look.
If you don’t know, when you click the Screen Options button at the top of the menu page, there are some other fields that are hidden that you can have display on each menu option’s screen display. The “class” field is useful as you can assign a specific class to that one menu option and assign CSS to that class (like changing the cursor display).
To make a non-linking menu item I suggest using the “Custom Links” menu choice and have it link to “#”.
Also, adding cursor: default to the CSS for the top level element removes the pointer cursor when the field is hovered over. It is still a link but it doesn’t look like a link to the user. And if it is clicked it stays on the same page.
I would love to do this, but I’m not sure where to put “cursor: default.” Here’s the only place parent is referenced in my style sheet:
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
color: #fff;
}
Can someone point me in the right direction, please? Much thanks!
Your post has little to do with this thread. Please post a new topic.
I’m not sure why you say that – this thread exactly answered my original question and I’m asking for clarification on one thing the above poster instructed. ….?
Can’t give a definitive answer without seeing your site.
Most likely it would be none of those, rather
#access ul li.current_page_item > a:hover { cursor: default; }
Thanks, stvwlf. Here’s the site if you have a couple seconds: http://ridetheup.com/
In the sidebar, I’ve already unlinked “Ontonagon County,” but I want it to not look like a link either if possible.
As Ontonagon County is an option in a WP Custom Menu, you need to assign it a custom CSS class, and style for that class, since it will indeed have an A tag as that is what the Nav menus create.
My suggestion: At the top of the WP Custom Menus page, open up Screen Options and put a check in the CSS Classes box. This creates a new field on each menu option where you can assign special classes to an individual list item (LI tag) within WP menu. Add a class named something like no-link
this allows you to create CSS like
.menu-reports-container li.menu-item.no-link > a, .menu-reports-container li.menu-item.no-link > a:hover {
text-decoration: none;
color: black; (use any color code you want)
cursor: default;
}
Then on any menu item you don’t want to look like a link, assign it the no-link class in the menu CSS Classes box.
It is possible other CSS styling will override some of those settings. the easiest way to resolve that – there are three settings there – if one or two work and one or two don’t, add !important on the lines of the ones that don’t work. like this
text-decoration: none !important;
Best not to use the !important unless you find you need it.
Your stylesheet may interact with this additional CSS code in such a way that it will require a little more tweaking. Can’t tell til it is live.
Perfect! It worked! Thank you so, so much.
Side note: I thought adding “list-style: none;” would take away the bullet too – do you know how I would do that? (If I may presume upon your kindness one more time…)
i believe it is “list-style-type: none”
And then you may need to adjust the padding
glad to hear it worked!
Well, I will have to fiddle some more – I can’t get it to disappear, but I am googling for more info now. Thanks again for your help – you have made my day. 🙂
