[Resolved] Change background color for one menu item

[Roy Shimmyo]

First off, thank you, Tom for a great line of products, and excellent support.

I hope this is something that is ok to ask here. I’m not experiencing any defect or problem, I’m just trying to customize my site beyond the standard customization. I’m trying to change the background color for a single item in my navigation using custom CSS, but I’m not getting the syntax correct.

[Tom]

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 🙂

[Roy Shimmyo]

Thanks Tom! This did the trick.

[Tom]

Awesome 🙂

[Pieter VAN OPSTAL]

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 😉

[Tom]

Doesn’t look like you’re using GeneratePress?

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

[Pieter VAN OPSTAL]

Hi Tom,

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

[Tom]

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

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

[Pieter VAN OPSTAL]

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).

[Tom]

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.

[ASCELCRE]

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?

[Leo]

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!

[Author]

Posts