Menu item background color

Support
#1

Hi,

My site is fog.lamachineavapeur.ca

Right up until yesterday, my #menu-item-“specific number” background color css code worked perfectly in both English and French. All of a sudden, only one item works in English but all of them work in French.

I have tried adding a class directly in the menu item like suggested in a few of the posts, to no avail. What is weird id that when i’m editing mode, it looks fine! Once online, not anymore.

Please help?

Thank you!

Nathalie :slight_smile:

#2

Hey Nathalie,

You can add a class to the menu item then add a custom CSS to set a background color to that menu item instead.

To do this, please go to WP Admin > Appearance > Menus then click on the Screen Options link on the top right part of the page.

Once click, you should see a collapsed panel. Make sure that CSS Classes is active under Show advanced menu properties.

Go to your menu items and you should see the CSS Classes (optional) field under the menu item settings:

Add a class to the menu item that you want to target. In this example, we will use the class highlight to the menu item.

Once the menu is saved, go to X > Theme Options > CSS then add this code:

.x-navbar .desktop .x-nav>li.highlight {
    background-color: green;
}

Feel free to change the value in the code above.

Hope this helps.

#3

Hi Jade,

Thanks for your reply. However, as stated in my request, these steps were already taken and implemented. I have found that useful thread before writing :slight_smile:

Could you help me figure out why, indeed, it won"t work?

Many thanks,

Nathalie :slight_smile:

#4

Hi Nathalie,

The IDs are present in the menu items for the french language:

Orbit_Garant_Drilling
Orbit_Garant_Drilling2512×360 181 KB

However, when you switch to English, the other IDs disappear:

Orbit_Garant_Drilling
Orbit_Garant_Drilling2490×278 170 KB

I am not sure how you did the customization about adding IDs to the menu item since it is not natively supported by wordpress that is why I suggested adding class names to the menu items instead just like the previous thread.

Hope this helps.

#5

Hi Jade,

I have added a css class to the menu and nothing changed…Any idea why?

Nathalie

#6

Hey Nathalie,

Thank you for reaching out to us. WordPress also generates the classes with same ID so instead of IDs you can use the classes. Add the following code in the Theme Options > CSS:

/* English version */
.menu-item-1445 {
    background-color: #1d2731;
}
.menu-item-1429 {
    background-color: #0b3c5d;
}
.menu-item-1456 {
    background-color: #328cc1;
}
.menu-item-1450 {
    background-color: #52b6e8;
}

/* French version */
.menu-item-393 {
    background-color: #1d2731;
}
.menu-item-193 {
    background-color: #0b3c5d;
}
.menu-item-415 {
    background-color: #328cc1;
}
.menu-item-200 {
    background-color: #52b6e8;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#7

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