How to change menu bar background color?

What theme are you using? It can be different from one theme to another.

You can try to inspect element and see the ID and CLASS of the menu, sometimes you need to specify #ID .CLASS {} to make it really works.

Hope it will help.

@tiyo thanks so much for the reply. Im using the a child theme for the Premiere theme by Danstriker at https://templateexpress.com. Here’s the site address: https://testwebsite.rightorderconcepts.com.

@alegna01, if you have not already taken a look at the information on the child theme page for the WordPress codex, please take a look at it here.

For the two different links, the menu area looks very different. From what I saw on the link you included, you have to modify the styles on your child theme for the items below (what it look like the theme is using to color in the whole header) and edit the lines that are bold.

site-header .site-introduction {
    text-align: center;
    position: relative;
    display: block;
    /* background-color: #150E0E; */
    max-width: 320px;
    min-height: 86px;
    margin: 0 auto;
    background: white;
    <strong>background: linear-gradient(0deg, transparent 0px, #fff 0) top right, linear-gradient(90deg, transparent 0px, #000 0) top left, linear-gradient(315deg, transparent 30px, #fff 0) bottom right, linear-gradient(45deg, transparent 30px, #fff 0) bottom left;</strong>
    background-size: 50% 50%;
    background-repeat: no-repeat;
    padding-top: 10px;
    z-index: 3000;
}

body.custom-background {
    <strong>background-color: #000;</strong>
}

#topbar_container {
    margin: 0 auto;
    width: 100%;
   <strong> background-color: #000;</strong>
    height: 60px;
}

Please note that you do not need to add every portion of the class or id but you do have to put the modified code in there. Hope this helps.

@jv8080 thank you for the reply and providing the link to wordpress codex as well as codes. Unfortunately, I don’t code and therefore don’t fully understand then language. Specifically, class and id.

Are you advising me to create a file under my child theme and update it with the code you provided above. If so, which parent file should I duplicate? Header?

Hi Alegna!

There is tiny and very useful firefox extension to identify the css file and line for any element of a site.

Basically you activate the extension, browse to the site, select the element (window, bar, link, text, etc) with the Firebug pointer, and it will show you on its right panel the css file and line were is the color (in your case) and even make on the fly test to see how it would look.

Please see this video it will definitely help you.