How do I highlight a single menu item by adding background color?

  • Resolved dialaster

    (@dialaster)


    7 years, 2 months ago

    Hi,

    I am trying to highlight one menu item by changing background color of that item and I can’t figure out how to do that because I don’t see any id, only “li”
    and link title. See screen shoot: https://pasteboard.co/H1GTiMX.jpg . On my old blog with another theme I was able to do this with menu item id like this li.menu-item-9 a {
    background: #ff0000 !important;
    }

    Could you help me with this or suggest how to identify menu item id that I can’t change background color with css.

    Thank you!

Viewing 1 replies (of 1 total)

  • Hello @dialaster,

    To add that highlighted button (or make changes to a single menu item), go to Appearance -> Menus -> Go to the top of the page and you will see Screen Options click there and check ‘CSS Classes’.

    See screenshot: https://gyazo.com/f09969d80c954fc921e1fbde1dfbe40b

    Then go to the menu item you want to add a class to and add it in CSS Classes(option): menu-highlight (for example)

    Then using your inspector tool you can select that menu list item and using that class to add CSS.

    For example:

    body .menu-highlight {
    background-color: tomato;
}

    Hope this helps!

    All the best,
    Mihaela

    • This reply was modified 7 years, 2 months ago by Miha.
Viewing 1 replies (of 1 total)
  • The topic ‘How do I highlight a single menu item by adding background color?’ is closed to new replies.