Different colors per menu item in Pro

Support
#1

Hi there,

I uograded the site I’m developing from X to Pro. I’m trying to achieve the same effect with changing background colors (on hover) per menu item and per submenu as well. In the X version of my site I placed some Custom CSS and call the class in Menus.
You can see the Pro header on the Contact page and the X header on all the other pages.

Do I need to make custom css? If so could you please provide me with the code and where to put it (Primary particle style-Inline CSS?)

And can I change the graphic icons per menu item as well?

Thanks,
Debora

#2

Hi There,

Thanks for writing in!
To make the background color different you have to add custom CSS for each of the menu item class.
Example

.e2229-12.x-menu > li > .x-anchor .x-anchor-particle-primary {
    color: red !important; /* your color code should goes here.*/
}

/* for submenu*/
.e2229-12 .sub-menu .x-anchor .x-anchor-particle-primary {
 color: red !important; /* your color code should goes here.*/
}

.e2229-12 this is your example menu class, I believe you know how to use chrome dev tool to find out the menu item class name. If not here is a simple video tutorial for help.

You can write the CSS in Pro -> Theme Option -> Global CSS or Pro -> Header -> Global CSS.

To change the icon of each menu item other than the regular arrow, you have to disable the sub-indicator and enable the menu graphics.

after that, you can choose your icon in Appearance -> Menus

Hope this is something you are looking for.

Thanks

#3

Hi there,

Thanks, with your css I can change the entire menu. Also I could locate the menu-tem codes with Chrome dev.
But unfortunately, after a lot of trial and error, I still haven’t found the right recepy for this to work per item.

For instance: this is what I tried:

This doesn’t work:

.e2229-12 .x-menu > li > .opvang-color .menu-item-495 .x-anchor .x-anchor-particle-primary {
color: red !important; /* your color code should goes here.*/
}

/* for submenu*/
.e2229-12 .sub-menu .menu-item-495 .opvang-color .x-anchor .x-anchor-particle-primary {
color: red !important; /* your color code should goes here.*/
}

Nor does this:

/Different colors per menu item in Pro/

.e2229-12.x-menu .menu-item-495> li > .x-anchor .x-anchor-particle-primary {
color: red !important; /* your color code should goes here.*/
}

/* for submenu*/
.e2229-12 .menu-item-495 .sub-menu .x-anchor .x-anchor-particle-primary {
color: red !important; /* your color code should goes here.*/
}

Could you, please, please help me with a detailed descripton of what to put where.

Thanks,

Debora

#4

Hi Debora,

Upon testing your site, I see the background color is changing per menu item (see secure note).

Make sure to clear your cache before testing.

Thanks!

#5

Hi there,

That’s right, what you send me is the current X header. I try to achieve the same effect on the Pro header. The only page where I adressed the Pro header is the Contact page. On the other pages you see the old X header still.

Regards,

Debora

#6

Hi Debora,

You can use the class you have added to your menus items

eg. Add this in PRO Header > CSS

.ondersteuning-color:hover a {
    background-color: rgba(230, 141, 25, 0.8);
}

.wonen-color:hover a {
   background-color: rgba(230, 141, 25, 0.8);
}

.opvang-color:hover a {  
    background-color: rgba(210,10,11,0.8);
}

Hope that helps.

#7

Hi there,

I’m sorry but I really need more detailed support.
Where can I find Pro Header CSS? Is it in custom- edit global css? Should I paste this new CSS somewhere in the code that was given in the first advice?
Where must I paste the menu-item-000?

The Pro header only adresses the Contact Page at the moment. The other pages use the custom css that I made when used the original X theme.

Thanks for your help,

Debora

#8

Hi again,

To find the Header CSS go to WP Admin > Pro > Headers edit your Header and on the left side panel you’ll find CSS tab (see screenshot)

You can paste the following code in there:

.ondersteuning-color:hover a {
    background-color: rgba(230, 141, 25, 0.8);
}

.wonen-color:hover a {
   background-color: rgba(230, 141, 25, 0.8);
}

.opvang-color:hover a {  
    background-color: rgba(210,10,11,0.8);
}

.activering-color:hover a {
     background-color: rgba(10, 157, 210, 0.8);
}

Hope this helps!

#9

Thanks a lot,

This helped. And how can I address the submenus with these colors?

Regards,

Debora

#10

Hello @DeboraG,

Thanks for updating the thread.

On my end upon opening the website I am getting 500 Internal server error message. https://cl.ly/1H3c3t2f3e2D

Can you please confirm?

Thanks.

#11

Hi there,

No, I can’t confirm that. No problems on my end.

Regards,

Debora

#12

Hi there,

You mean the entire background of sub-menu upon hover? You can achieve that by enhancing that existing CSS to this,

.ondersteuning-color:hover a,
.ondersteuning-color:hover .sub-menu {
    background-color: rgba(230, 141, 25, 0.8);
}

.wonen-color:hover a,
.wonen-color:hover .sub-menu {
   background-color: rgba(230, 141, 25, 0.8);
}

.opvang-color:hover a,
.opvang-color:hover .sub-menu {  
    background-color: rgba(210,10,11,0.8);
}

.activering-color:hover a,
.activering-color:hover .sub-menu {
     background-color: rgba(10, 157, 210, 0.8);
}

And if you wish to achieve different hover background for sub-menu links, then simply enhance it too, this is just a sample but you don’t have to apply,

.ondersteuning-color:hover > a,
.ondersteuning-color:hover .sub-menu  {
        background-color: rgba(230, 141, 25, 0.8);
}
.ondersteuning-color .sub-menu a:hover {
        background-color: pink;
}

Notice that I add > on the first selector, this means the CSS only affects the current link of the menu, and not all links within the menu including sub-menu links. Then the .ondersteuning-color .sub-menu a:hover is what defines the hover for sub-menu links.

Hope this helps.

#13

Hi there,

I had to make a small alteration to your code - thanks to trial and error :slight_smile: I found it out.
I skipped a .submenu and then it worked!

This is the code I pasted now.

.ondersteuning-color:hover > a,
.ondersteuning-color:hover {
background-color: rgba(230, 141, 25, 0.8);
}
.ondersteuning-color .sub-menu a:hover {
background-color: rgba(230, 141, 25, 0.8);
}

Thanks for all your support!

Regards,

Debora

#14

You are most welcome. :slight_smile:

#15

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.