I need menu bar with different item color, but I don't know

I need menu bar with different item color, but I don't know how select in css each menu item to change color

  • Patrick
    • Support Monkey

    Hi there @Bruno

    Welcome to WPMU DEV, glad to have you aboard!

    There is actually a very easy way to do that. :slight_smile:

    Under Appearance > Menus in your admin, click the Screen Options tab at the top-right of your screen and check the box where you see CSS Classes (1st screenshot below).

    You'll then be able to add any custom CSS class name to any menu item in any menu you have. Save your settings. :slight_smile:

    To do so, you'll first need to identify the ID or class of the navigation container in your theme so you can target the menu inside it. Using your browser's developer tools, highlight the menu and locate the main container (2nd screenshot).

    Then you can style those classes any way you like by adding custom CSS to the style-sheet of your theme or child-theme, or use a handy plugin like this one for all your custom CSS needs:

    For example, if you add a class name like in the image below (my-custom-color-item), the following CSS would give it a flame-red background:
    #site-navigation .my-custom-color-item {background:#ff0000;}

    I hope this helps! And thanks for being a member :slight_smile:

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.