WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Top-level navigation item to have no link? (26 posts)

  1. searchen
    Member
    Posted 3 years ago #

    Hi!

    I am using a theme with a top navbar for pages. (The theme doesn't support Custom Menus).

    How can I make some top-level items (nav menu item name) able to rollover to activate the drop-down, but not itself lead to any URL?

    Is there a plugin that can do this?

    Thanks, Peter

  2. stvwlf
    Member
    Posted 3 years ago #

    yes Page Lists Plus

  3. searchen
    Member
    Posted 3 years ago #

    brilliant... thank you!

  4. maxedleson
    Member
    Posted 3 years ago #

    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.

  5. stvwlf
    Member
    Posted 3 years ago #

    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.

  6. maxedleson
    Member
    Posted 3 years ago #

    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?

  7. stvwlf
    Member
    Posted 3 years ago #

    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 "#".

  8. laburke
    Member
    Posted 3 years ago #

    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!

  9. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Your post has little to do with this thread. Please post a new topic.

  10. laburke
    Member
    Posted 3 years ago #

    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. ....?

  11. stvwlf
    Member
    Posted 3 years ago #

    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; }

  12. laburke
    Member
    Posted 3 years ago #

    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.

  13. stvwlf
    Member
    Posted 3 years ago #

    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.

  14. laburke
    Member
    Posted 3 years ago #

    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...)

  15. stvwlf
    Member
    Posted 3 years ago #

    i believe it is "list-style-type: none"

    And then you may need to adjust the padding

    glad to hear it worked!

  16. laburke
    Member
    Posted 3 years ago #

    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. :)

  17. stvwlf
    Member
    Posted 3 years ago #

    Oh, I can tell you why it isn't working

    You are applying it to the A tag and it needs to be applied to the LI tag

    .menu-reports-container li.menu-item.no-link, .menu-reports-container li.menu-item.no-link:hover {
      list-style-type: none;
    }
  18. laburke
    Member
    Posted 3 years ago #

    Hooray! Got it! Thanks bunches. :)

  19. jayydee
    Member
    Posted 3 years ago #

    @searchen

    Disable any parent item in WordPress 3.0 Menu:

    1) Be sure you have activated the link target in the options menu on your menu page
    2) Insert a custom link with no matter what link
    3) select the just created custom link. click on the dropdown link on the top right side.
    4) delete the link from the link target field
    5) done

  20. joew
    Member
    Posted 3 years ago #

    Thank you @jayydee. Worked like a charm - and answered the original question with zero frills.

  21. Daniel Bracho
    Member
    Posted 2 years ago #

    Don't mean to bump old topics but this helped me save a few hours looking. Thanks!

  22. Ourobo
    Member
    Posted 2 years ago #

    @jayydee: easy spot-on solution.

    FYI to others, it took me a second to understand the directions, so here's my redux. It's the exact same instruction with more explanation in case you are a newbie like me. Hope it helps.

    Here was my case: I had created a page called "Staff" in my top menu, and attributed employees to it. I wanted people to be able to scroll down to "jen" "paul" and "mark" under staff and be able to click their name, but NOT be able to click "Staff".

    So:

    To disable any parent item in WordPress 3.0 Menu:

    (1) In the dashboard go to Appearances/Menus
    (2) Go to Screen Options (top right) and activate Link Target.
    (3) Go to Custom Links and insert any kind of link, and then Label it what you want your menu item to be called. In my case, this was "staff".
    (4) select the just created custom link. click on the dropdown link on the top right side of its box.
    (5) delete the URL from the link target field.
    (6) Drag and drop any pages/posts which you wish to attribute to it as you normally would. In my case, I placed "Jen" "paul" "mark" as its submenu items.
    (6) done

  23. reticentbitch
    Member
    Posted 2 years ago #

    jayydee and Ourobo you are AWESOME. I have been trying to do this forever and THANK YOU. That worked brilliantly!

  24. robnalexpress
    Member
    Posted 2 years ago #

    The above method works fine except on mobile devices. When I click a no-link parent on my iphone the drop-down does not appear.

  25. robnalexpress
    Member
    Posted 2 years ago #

    The method described above, of creating a link, then deleting it works fine except on mobile devices. When I click a no-link parent on my iphone the drop-down does not appear.

    The better method is to simply use "#" (without quotes) for the URL. Not http://# - just #. It makes the link non-clickable, but you will still get the drop-down child menus on mobile devices.

  26. webwide
    Member
    Posted 2 years ago #

    jaydee - ourobo - robnalexpress - thanks for these great tips!

Topic Closed

This topic has been closed to new replies.

About this Topic