You can use a browser inspection tool such as Firebug to see what CSS rules are controlling the menu and then use a custom CSS plugin (or their theme’s built-in custom CSS option, if one exists) to override those rules.
Hi Jerryz
would it be possible to provide the URL of the site you need to change??
It is always better to see live version to help.
could you specify closer the request you need to do for your client.
Best regards
Tahoe Rock
http://aperfectcomplement.com
Client wants to see dark gray onhover turned to light brown, and dropdown menu pink onhover changed to teal color.
This is a really good tool for get the css code for different menus types
cssmenumaker[dot]com
You can hook this into wp menus and it will update the whole site. That’s a little more than I want to type out here.
Im outside just on my iPad
When I get home I will try to help you out.
I need that developer tool mentioned. 🙂
Best
Tahoe Rock
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
If you’re not using a Child Theme, and if the theme doesn’t have a designated section of the dashboard for CSS modifications then install this Custom CSS Manager plugin http://ww.wp.xz.cn/plugins/custom-css-manager-plugin
Then use its “CSS Code” section of the dashboard to hold your CSS modifications:
Alternatively use your Child Theme style.css file to hold your CSS modifications:
Client wants to see dark gray
.menu-dropdown li.active .level1 {
background: darkgray;
}
onhover turned to light brown
.menu-dropdown li.level1:hover .level1 {
background: burlywood;
}
and dropdown menu pink
.menu-dropdown li.level1:hover .parent,
.menu-dropdown .dropdown-bg > div {
background: pink;
}
onhover changed to teal color.
.menu-dropdown li.level2:hover {
background: teal;
}
http://www.w3schools.com/cssref/css_colornames.asp
https://getfirebug.com/
In future talk to your theme’s vendors for support with their product, or consider using a theme we support: http://ww.wp.xz.cn/themes/
Hello Jerryz
So Im finally at home and see that job is done thanks to Andrew.
Looks like he is right.
So if something goes out of your range let me know.
Great job Andrew
Cheers
Tahoe Rocks
Thanks guys, im a total newb, but what i understand is that i should be using firebug to display the code for both html and css. I then somehow manage to see what it is i need changed, and send the change command into my custom css manager plugin?
Any link to a youtube video would be awesome, cause the only part i need help with is
• identify what needs to be changed, how did andrew identify this =
.menu-dropdown li.active .level1 {
background: darkgray;
}
• undo my change should something go wrong
Thanks again guys.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
• undo my change should something go wrong
Deactivate the Custom CSS plugin that I recommend you use.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
- Open your site in Google Chrome
- Right click on the submit button
- Select “Inspect element
- A new toolbar appears. Look at the right-hand column for the CSS
- Scroll that column until you find the style responsible
- Copy that responsible style if you want
- Then paste it into your Custom CSS manager section
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Here is where u can start
https://www.youtube.com/watch?v=tdIk2PztcL0
I use both crome developer tools and firebug also
TAHOE ROCK
Thanks Guys. Appreciate your help.
