Hello,
if you wont the cange background color of menu on your site go to Appearance/Edir, select your theme, scroll down and there find file Stylesheet. Open it and there paste this code:
#site-navigation .dropdown-menu ul a {
background-color: #ff00FF;
}
You can put your color (for example: #12K5F5)
By,
Kris
You should not edit the theme files directly, because if the theme ever gets updated (like for feature updates or security patches), then you will lose your changes. Instead, you should either create a child theme and add your CSS to the child theme’s style.css file, or use a custom CSS plugin if your theme doesn’t have a Custom CSS option.
Thank you for your answers. I’m quite new at WordPress, but I’ve managed to install a child theme. What is my CSS specifically? Does it realte to Kris’ answer?
Yes if you have a child theme.
By,
Kris
Yes, you can add her CSS to the end of your child theme’s style.css file.
I think I haven’t been clear enough. I did not want to change the colors of the dropdown menu, but the menu itself. (I’m not sure of the exact name of it.. the one that’s always at the top). Right now, it’s sort of black/blueish… However, the CSS did work – for the dropdown menu.
I hope this clear things up. (Maybe I’m just not doing it right?)
Anyway, thank you for your answers so far!
You want to target the #site-navigation-wrap. Add this to the end of your child theme’s style.css file:
#site-navigation-wrap {
background-color: #ddf;
}
Of course, use whatever color value you want.
Ah, I see! Thank you.
However, as I change that color, the others (when I hover over, or the selected, etc.) remain the same. Will I need to change all of them individually? And is there a tutorial to do this, or is it just “watch and learn”?
Again, thank you.
You should learn to use a web debugging tool like Firebug (a free Firefox extension) or Chrome Developer Tools, which comes built-in with Chrome. I used Chrome DevTools to look at your site and figure out what selector to use. All you need to do is right-click on an element and select Inspect element from the pop-up menu and you’ll see all of the CSS rules which affect that element.
Other selectors that you’ll need to style:
#site-navigation .dropdown-menu > .current-menu-item > a
As you can tell from the wording, this targets the color of the current menu item, which is the menu item that corresponds to the page that you are viewing. If you are on the Home page, then this would affect the color of the Home menu item.
#site-navigation .dropdown-menu ul a
As Kristen indicated earlier, this targets the drop down menu items.
If you’re looking for a good CSS tutorial, I like this one.
I will definitely look into that. Thank you!
