Change background color for one menu item

Hi Roy,

You're welcome :)

If you inspect element (using Chrome), you'll see each menu item has a unique ID.

So, the syntax would be:

.main-navigation .main-nav ul li#menu-item-xx a {
      /* background and color stuff in here */
}

In the above, you would replace menu-item-xx with the ID of the menu item.

Hope this helps :)

Thanks Tom! This did the trick.

Awesome :)

Hi Tom, thanks for your great work, I want to ad a personnel color to each of my main menu buttons in the main navigation menu. I tried the solution mentioned above, but i couldn't find "menu-item-xx" while inspecting with chrome, i only find li class="page_item page-item-xx". I added the code mentioned above into the CSS, but I'm not able to make it work. You can take a look on http://www.arentat.info/wp

Thanks a lot, i'm pretty sure you will know how to deal with this ;)

Doesn't look like you're using GeneratePress?

Each menu item's <li> element should have an ID like this: menu-item-xxx

Hi Tom,

I'm using Generatepress with the Mantle Theme, please take a look on http://www.argentat.info/wp

Ah, have you created a menu and set a theme location in "Appearance > Menus"?

https://en.support.wordpress.com/menus/

I figured it out by following your tip (creating a menu), while inspecting the elements i found the lines you where talking about. I'll work on it this weekend. Just another little question. is it possible to put space between the menu buttons, or to share all the buttons over the content width (with spacing between each button).

There's no way to make the items take up the entire space of the navigation area (that I know of), but you can adjust the left and right padding of the items using the Spacing add-on.

Hi, I want to do it too, but my css is not working. I am failing in something:

.main-navigation .main-nav ul li#menu-item li#menu-item-type-post_type li#menu-item-object-page li#current-menu-item li#page_item li#page-item-1073 li#current_page_item li#menu-item-1078 a {
color: #FF0000; backgroung: #FF0000;
}

Do yo know what is wrong?

I would recommend the method in this article first:
https://docs.generatepress.com/article/adding-buttons-navigation/

If not any chance you can open a new topic and link us to your site?

Thanks!