The Support Forums will be in read-only mode for a scheduled maintenance window on 01 September 2016 14:00 UTC - 20:00 UTC. More information.

target menu dropdown for custom css (8 posts)

  1. cathbland
    Posted 3 years ago #

    Please help, how do I target a specific dropdown item in a list. I figured out how to target the top level menu...
    li.menu-item-157 {
    width: 144px;
    line-height: 12px;

    But am struggling to target 3 of the dropdowns.


    Thanks in advance for any help

  2. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Sounds like you just need to append an "li" at the end of your selectors.
    For 2nd level items:

    li.menu-item-157 li

    For 3rd level items:

    li.menu-item-157 li li

    Each submenu item you have comes with an ID as well so I can't see how your original technique wasn't sufficient.

    Anyway, can you identify where you found that theme and which license that theme is released under?

  3. cathbland
    Posted 3 years ago #

    Hi Andrew,

    Thanks for your help but this doesnt seem to work, could it be because the items that I am targeting are not actual pages, but links to other websites?

    I am building this theme myself, Im still pretty new to theme dev though ;)

  4. zlajaa1
    Posted 3 years ago #

    As I can see it's simple. This is your code from navigation:

    <li id="menu-item-199" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-199">SERVICES
    <ul class="sub-menu">
    <li id="menu-item-198" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-198">Our Services
    <li id="menu-item-197" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-197">Warrantee
    <li id="menu-item-196" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-196">Support

    Now, this is only services tab from navigation, if you want to target li from dropdown use class or id of li that is on dropdown ul. You will have to see is there any style applied that overwrite yours. And change styles in class that is written. Please ask for more detailed if you don't understand. I'll be glad to help you.

  5. ronangelo
    Posted 3 years ago #

    .menu-item-157 IS a sub-menu item. There's nothing under it except for the link/anchor.

    Can you be more specific on what you're trying to achieve?

  6. cathbland
    Posted 3 years ago #

    Im trying to change the line height on 156 and 157 sub-menu items, the full item label is not showing (should say 'outsource digital zimbabwe' and 'outsource digital botswana')and if i change the line height on all the menu dropdowns then the rest of the labels that are only one line look off.

  7. ronangelo
    Posted 3 years ago #

    .menu-item-156 a, .menu-item-157 a {
        line-height: 1.3;
  8. cathbland
    Posted 3 years ago #

    Thank you Ronangelo! it worked & u rock :)

Topic Closed

This topic has been closed to new replies.

About this Topic