Area above nav bar different color

[rkassebaum]

Say, I would like to change the color above the nav bar. However, the nav bar and area above nav bar when you try to change they stay the same color. So, how can I change just the area about the nav bar and keep the nav bar the same color? https://lincolnveteransparade.org/

[ruenel]

Hello @rkassebaum,

Thanks for writing in!

The area that you are referring to is the logobar. The background color of the logobar goes with the same background color of the navbar. There is no option in the theme that allows you to change the background color of the logobar. You need to add CSS code into X > Theme Options > CSS to override the background color.

You need to use the Google Chrome Developer Toolbar to check the live HTML code and find which CSS selector you need to use.

The logo bar container use x-logobar CSS class. Therefore a proper CSS selector for changing the background color will be:

.x-logobar {
    background-color: black;
}

Feel free to change the color that fits to your site. I used black color as an example.

The points above will be a good starting point and if you are interested you can learn more about CSS selectors and details here

If you are more interested in having control over all aspects of the header, I suggest that you consider the Pro theme which has a Header builder and you can insert separate bars with different background colors in the custom header.

Kindly check the Elements section of our documentation to learn more on which elements you can use on Pro Header/Footer builders.

Best Regards.