How To Set Different Color For Header and Navigation Bar

[Rumble32]

Hello,

I want to select different colors for the header portion - where the name of my site is displayed at the top, and the navigation/menu bar that has options such as about me, privacy policy etc.

I tried to change color by going into Ethos> Top NAVBAR Background color, but that changed the color of the header as well.

Thank you

[friech]

Hi Rashmi,

Thank you for writing in, please edit your menu, and add a unique CLASS for each of your menu. (different class different color)

If you don’t see that CSS Classes field, please pull down the Screen Options menu, and tick the CSS Classes

And then add this to Theme Options > CSS

.x-nav .menu-class {background-color: red;}

Replace the menu-class with the actual class you assign on the menu, and replace the red with the desired background-color.

Do that to each of your menu items.

Hope it helps,
Cheers!

[Rumble32]

Hi,

I think I wasn’t clear while explaining what I want. The CSS code is for changing the color of the navigation bar text I guess but what I want to change is the color of the Navigation Bar itself and the Header Bar that has the name of my site. I am attaching two screenshots. One shows how my site header currently looks with both bars of the same color (not wanted) the other screenshot shows how it should look with different colors.

[Prasant]

Hello Rashmi,

Thanks for updating the thread.

Please replace above CSS with following under X > Theme Options > CSS:

.x-logobar {
    background-color: #863d3d;
}

.x-navbar {
    background-color: #7d6931;
}

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.