Hi, I am doing translated versions of my pages (in spanish) and I am running into some issues with some CSS that I am using to style an inline nav element. On my english version, I am using the following CSS in the elements’ custom CSS settings (it’s making it so that each menu item has it’s own color coordinated background):
#menu-item-289, .x-anchor-text-primary a span {
background-color: rgba(232, 219, 130, 0.7);
border-radius:10px;
margin-bottom:1em;
}
#menu-item-290, .x-anchor-text-primary a span {
background-color: rgba(234, 150, 145, 0.7);
border-radius:10px;
margin-bottom:1em;
}
#menu-item-291, .x-anchor-text-primary a span {
background-color: rgba(138, 195, 212, 0.7);
border-radius:10px;
margin-bottom:1em;
}
#menu-item-292, .x-anchor-text-primary a span {
background-color: rgba(147, 222, 170, 0.7);
border-radius:10px;
margin-bottom:1em;
}
@media (max-width: 1000px){
.x-menu.x-menu-inline {
flex-direction: column;
}
}
I have created the spanish version using WPML in the content builder and noticed that the above styling wasn’t being applied, so I figured it was due to the #menu-item-xxx number needing to be updated. So I used the inspector to identify the new menu item ID numbers in the spanish version and updated them accordingly on the spanish version, saved and it doesn’t work. And what really confuses me is that in saving the updated custom CSS to the spanish version it updates the custom CSS of the same inline nav element on THE ENGLISH version.
So I’m wondering if the easiest way is to rewrite the CSS selectors to something that will work across both versions of the page? Is there a different way to write the CSS rule that will target the same menu items independently but won’t be so specific? I’m not sure how to get past this. Please see the secure note for links.
