Different menu background color for each tab

You have 5 different tabs and they all have different CSS classes. So you would have to make 5 new classes with the background-color for what you want.

Here the are from left to right.

menu-item-10
menu-item-11
menu-item-86
menu-item-251
menu-item-61

Here’s what you would need to add for each one in style.css

.menu-item-10 {
background-color: #333;
}

Note that you can also apply custom CSS classes to menu items.

From the Dashboard -> Appearance -> Menus page, click “Screen Options”, and ensure that the checkbox is enabled for the custom CSS classes option. Then, in each menu item, you will find a text field in which you can add custom classes.

Not that easy as the website in the link, when you click the red link the loaded page title is also red, so there are two elements at work here, menu class and post class!

To give a good answer then a bit more detail, are you only using pages, or categories?

If it is a few you can if supported use a custom menu and menu “CSS Classes”, then if it is pages create a page template for each color and use the page_class or post_class to style the page!

A mix of these may give you some ideas, for the menu classes have a read of this post replacing the image styles with background styles, and for the post_class have a look at the page template in this post.

HTH

David

I tried doing the

.menu-item-10 {
background-color: #333;
}

That didn’t work. @digitalraindrops I’m using pages. I’ve tried using the menu classes in menus options page and that didn’t work either.

if it is pages create a page template for each color and use the page_class or post_class to style the page!

I’m not sure I understand the above. Can you explain it to me again? I’m sorry I’m a novice.

I don’t see that you added that code in style.css

Did you delete it? If so can you add it back so I can see.

@wp bum. Maybe I added it to the wrong place. I put it at the bottom of the style sheet.

You are trying to add it to this file

https://www.hispanicalliancesc.com/en/wp-content/themes/ACCH/style.css

Hi,
I created a twenty eleven child theme, you can grab it here:

Using a custom menu and the “CSS Classes”, nav-1 to nav-6, add six pages and the classes, save the menu and allocate to the primary “Template Location”

The page that relates to menu item one, edit and select the “Color One” template, repeat for the other pages “Color Two” to “Color Six”

This is for a simple six page website, and it will show a simple way to get close to what you want!

It uses Menu Item “CSS Classes”, “Template Pages”, and “Post Classes”

Screen Shot:

HTH

David

David

Thanks for the child theme. I got it working on the twenty eleven theme. I tried changing the files around to make it the child theme for ACCH but I got a error. I apologize if I missed a step here. I think I may be missing something small here. I apologize David.

Rich

Got it thanks.