Changing menu background color and font

Are you familiar with CSS?

Not really, but I have modified some php files and stylesheet by searching for menu, header etc. And so far, it hasn’t been too bad. Is this the relevant portion?

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
border-bottom: 1px solid #ededed;
border-top: 1px solid #ededed;
display: inline-block !important;
text-align:center;
width: 100%;border-radius: 5px;background:#FFFFFF

From here how do I change the font color and make it bold? Thanks so much for offering to help!

Have you (instead of editing the theme files) a section of the dashboard named, “Custom CSS” or “Edit CSS”?

I’m sorry I haven’t done that. I am not sure how to do that.

Install this Custom CSS Manager plugin and use its section of the dashboard to hold your CSS modifications.

This means you’ll have to create new CSS that overrides old CSS, instead of editing old CSS.

Try adding this to it:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {

 /* background colour */
 background: deeppink;

}

.main-navigation li a {

 /* Font colour */
 color: deepskyblue;

 /* Bold */
 font-weight: bold;

}

Thanks so much! I’ll try this.

Hi Andrew!

Thank you so much! This really helped. I had no clue. Thanks once again!

Could you help me with one more thing? Sorry if this is silly, is there a way I can remove the border on the menu bar? Thanks!

is there a way I can remove the border on the menu bar

Amend this bit of the code:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {

 /* background colour */
 background: deeppink;

}

To this:

.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {

 /* Background colour */
 background: deeppink;

 /* Remove border */
 border: 0;

}

Thanks so much Andrew! It works perfectly. I’m so very grateful for your help!

Can you guys help me out with some more codes…except the bold and colour…the font’s, the hover color, and whatever comes in mind ??
Thanks Andrew