Changing Menu Bar color

You can add this to your Child Theme style.css file, or by using a Custom CSS plugin.

.navigation.bg-dark {
    background: #fff;
}

You can then finetune your menu colors like so:

.main-navigation li > a, 
.main-navigation ul ul a, 
.main-navigation ul ul ul a, 
.main-navigation ul ul ul ul a, 
.main-navigation ul ul ul ul ul a {
    color: #000;
}
.main-navigation li:hover > a, 
.main-navigation li:focus > a {
    color: #f00;
}

Hope this helps.

That did the trick! Thanks so much!

Okay, one more thing, how do I make the menu options centered in the menu?
Thanks so much for your help!

.main-navigation li {
    float: none;
    display: inline-block;
}
.main-navigation ul {
    text-align: center;
}

Glad to help

Okay, so on the mobile version, the list button to reveal the menu options is still white so you can’t see it. How should I fix that? And the alignment in the drop down is a little strange.

Replace the last snippet of code I gave you with the this code instead.

@media only screen and (max-width: 1000px) {
    .nav-toggle:before { 
        color: #444; 
    }
    .main-navigation li {
        display: block !important;
    }
}
@media only screen and (min-width: 1001px) {
    .main-navigation li {
        float: none;
        display: inline-block;
    }
    .main-navigation ul {
        text-align: center;
    }
}

Hope this helps.

Perfect! Thank you!

Hi there, I have another question. I want the header image just to show up white and not gray. I don’t know if that has an override code but just thought I’d ask. I inserted an image of a white background and when I apply it it shows up as gray.

Also, when I press the title of my blog, it changes to a different font while it takes you to the page. I would like it to stay the same font as it is standing.

If you inspect the code structure of your theme by either using your browsers Inspect Element feature, or by using a tool like Firebug, you can view the styles that are being applied to any theme element.

.header .cover {
    background: rgba(29,29,29,.25);
}

This is the where the grey color is coming from, the .25 value is the opacity of the 29,29,29 grey color.

Using your Child Theme style.css file, or Custom CSS plugin, you can override the above code with the color of your choice, like so:

.header .cover {
    background: #fff;
}

You should start a separate thread if you have other issues with your theme to keeps things relevant to the thread title.

Hope this helps.