WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] How about add classes to menu items? (12 posts)

  1. Zarce Baron
    Member
    Posted 12 months ago #

    I was wondering a way to easily add classes to menu items in order to create unique visuals and behaviors for specific links.
    I've been using css selectors, such as li + li to create these effects but the code can become really clumsy and confused, not mentioning this technique is not scalable, once the CSS is static and any modification in items order will cause a disaster.

    Then, I wonder how difficult would be to implement this "add class to a menu item" in new versions of WordPress! I'm not a developer but I'm sure it's not rocket science. Am I wrong? Please tell me if it's a delirious of mine.

  2. Andrew
    Forum Moderator
    Posted 12 months ago #

    To which HTML element do you want to add a class?

  3. Zarce Baron
    Member
    Posted 12 months ago #

    It depends.. <a> or <li>. It's usual to add a class to <li>tag. For instance, imagine that only few items in the menu have subitems, and I want to add a down arrow to these items indicating that there's subitems under them, hidden. Right? It is a good practice.
    A good way to do it, would be on admin panel > appearence > menus. Once you select an item to add to your menu, besides the conventional inputs like Label and Attribute, it would be awesome to have a simple input called "Class". Then, just assign the desired class to a specific menu item.

    At least, in my limited non-developer mind, it looks pretty simple to implement and it would be a super useful setting.

  4. Andrew
    Forum Moderator
    Posted 12 months ago #

    I know you're not a developer but it may be worth reading on what developers do in your situation:
    http://codex.wordpress.org/Function_Reference/wp_nav_menu

  5. Zarce Baron
    Member
    Posted 12 months ago #

    Hi Andrew! I appreciate your help, but for what I see in this article, I don't think it solves my needs. Even if it does, all this seems to be so unecessary!

    Check this image I made to explain what I belive to be a huge improvement and why WP developers should take into account.

  6. psopacua
    Member
    Posted 9 months ago #

    Zarce Baron, already found a solution for it? Got the same problem and i am looking for a solution so i can play with responsive menu's =]

  7. Zarce Baron
    Member
    Posted 9 months ago #

    psopacua, Not a word from the community. I really hope this feature can be added soon 'cause I don't believe it's a rocket science and it would be so so helpful for us.

    What I'm doing as an interim solution, is to add an title attribute to the link when it's created, and then, using the [title=""] css selector, I'm able to assign any visual element to the link that I need.

    Still, it's far from a good solution, considering its lack of scalability and maintenance, but until the feature proposed is not implemented, I think it's the better way to deal with it.

  8. I was wondering a way to easily add classes to menu items in order to create unique visuals and behaviors for specific links.

    You don't need that.

    CSS already lets you create unique calls for specific links.

    http://justintadlock.com/archives/2013/08/07/social-media-nav-menus
    http://justintadlock.com/archives/2013/08/14/social-nav-menus-part-2

    Just as an example, if your menu is called 'social' then you can do this:

    li.social a[href*="facebook.com"] {
        color: blue;
    }

    And so on :)

  9. Justin Tadlock
    Member
    Posted 9 months ago #

    All you need to do for custom classes is add your class in the "CSS Classes (optional)" input box for specific menu items.

  10. If you don't see that option, go to /wp-admin/nav-menus.php

    Click on Screen options.

    Check the box for CSS Classes

    Blissed on the simpliest answer, of course!

  11. Zarce Baron
    Member
    Posted 8 months ago #

    Hey Justin and Ipstenu! Thank you guys for your help!
    That was exactly what I was looking for! I wasn't able to see the option at first... I feel silly now. :D

    Thank you again!

  12. Zarce Baron
    Member
    Posted 8 months ago #

    Just closing this topic as RESOLVED. :)

Topic Closed

This topic has been closed to new replies.

About this Topic