Dear Support,
I am working on a website that will have a number of different sections called “modules”.
I am creating custom menus for each module, to appear in the left sidebar of each section. I would like to style each of these menus with their own unique colour scheme.
By inspecting the elements in chrome, I noticed that each custom menu is given its own unique id for the ul, and this seems like it would be a logical way to target and style each menu.
That said, I’m finding it to be easier said than done.
I would like to be able to target each menu by id, and change the background colour, borders, text colour, current item background, and perhaps other properties, such as padding, etc.
I think it has something to do with the styles under nav menu widget, but I’m finding it somewhat overwhelming.
Can you provide an efficient way to approach this?
Thanks!
Hey wcathro!
You can find the navigation menu widget CSS in /enfold/css/layout.css starting on line 2038 to get an idea on how to style it.
If you want to target them separately then you can use their IDs like so.
#menu-item-3331 a {
background: green;
}
Cheers!
Elliott
Thanks Elliott. I’m figuring it out, albeit slowly. A lot of trial and error. I’m also using the Custom Classes plugin which makes it easy to target the relevant pages.
Hi!
we hope you can figure it out. If you have any more questions, we are happy to assist you.
Best regards,
Andy