Docs

[alanjonesonline]

Hi There,

In Ethos, is it possible to change the top nav bar colour and nav font colour without changing the colours in the bottom widget widget area?

I’d like to have the navigation bar background colour white, the heading and navigation font colour ’51 51 51′ and for the bottom widget area to remain as it is.

Appreciate your help.

http://www.alanjonesonline.com

Cheers,
Alan

[John Ezra]

Hi Alan,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

.x-navbar {
    background-color: #ffffff;
}

a.x-brand.text {
    color: rgb(51,51,51);
}

.x-navbar .desktop .x-nav>li>a {
    color: rgb(51,51,51);
}

Hope this helps – thanks!

[alanjonesonline]

Hi there,

Thanks for this. Yes it worked spot on when the logo and navigation sat next to each other but I now have the logo and navigation stacked on top of each other. This custom CSS does the trick for the bottom line (navigation) but doesn’t effect the top line (logo text). Is it possible to change the logo’s background colour to white also?

Any help would be appreciated.

Cheers,
Alan

[Nabeel A]

Hey Alan,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-logobar, .x-navbar, .x-navbar .sub-menu, .x-colophon.top {
    background-color: #fff !important;
}

Let us know how this goes!

[alanjonesonline]

Thank you but is it possible to be able to change this top logo background colour without changing the bottom widget area colour? I lost my widget area.

Cheers,
Alan

[Friech]

Hi Alan,

Please update the code to this:

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

Hope it helps, Cheers!

[alanjonesonline]

Great! Thank you.

[Rue Nel]

You are most welcome!

[alanjonesonline]

Hi there,

Adding this CSS has also changes the mobile navigation icon to white. Now I can’t see it.

Any suggestions?

Cheers,
Alan

[Joao]

Hi Alan,

Please use this code to adjust your mobile navbar icon color, add it at your Appereance / Customizer / Custom / CSS

Hope that helps,

Joao

.x-btn-navbar.collapsed {
	background-color: #F06624;
	color: #000;
}

[alanjonesonline]

Thank you.

At the moment it’s hover colour is white. How do I change this to rgb(115, 115, 115)?

Appreciate all your help.

Alan

[Friech]

Hi Alan,

Please update the code to this:

.x-btn-navbar.collapsed:hover, .x-btn-navbar:hover {
    color: rgb(115, 115, 115);
}

Hope it helps, Cheers!

[alanjonesonline]

Hi there,

Thank you. Thats’s great.

One last question and I think I’m there. Is it possible to change the top navigation’s hover colour without changing the hover colour of the drop down list attached to my “News”?

Again, really appreciate all your help.

[Christopher]

Hi there,

Please add this :

.x-navbar .desktop .x-nav > li > a:hover {
    color: red;
}

Hope it helps.

[alanjonesonline]

Thank you. Great!

[Author]

Posts