Docs

[amyhern]

Hi there,

How do I change my nav bar (with the menus in it) to be a different color? I want it to be a forest green = rgb(33, 127, 12). I want the logo bar to be white. How do I change the nav bar to that specific forest green (#217f0c) without changing the color of the logo bar?

I’m using X Version: 4.4.2
WordPress version 4.5.2
Cornerstone version Version 1.2.4

Thanks in advance! 🙂

Regards,

Amy

[amyhern]

This reply has been marked as private.

[Prasant Rai]

Hello There,

Thanks for writing in!

You can add this under Custom > CSS in the Customizer:

.x-navbar .desktop .x-nav > .current-menu-item > a {
    color: #676767 !important;
}

.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 #3A3E3D;
}

.x-navbar .desktop .x-nav > li > a:hover {
    color: #676767 !important;
}

.x-navbar .desktop .x-nav > li > a:hover {
    box-shadow: 0 2px 0 0 #595B5A;
}

Please change color code as per your requirement.

Thanks.

[amyhern]

Hi Prasant,

Unfortunately, it didn’t fix it. I put this in the custom CSS and inserted the color code (#217f0c) like this:

.x-navbar .desktop .x-nav > .current-menu-item > a {
color: #217f0c !important;
}

.x-navbar .desktop .x-nav > .current-menu-item > a {
box-shadow: 0 2px 0 0 #217f0c;
}

.x-navbar .desktop .x-nav > li > a:hover {
color: #217f0c !important;
}

.x-navbar .desktop .x-nav > li > a:hover {
box-shadow: 0 2px 0 0 #217f0c;
}

However, it’s still not working.

Regards,

Amy

[Joao]

Hi There,

Please try adding the following code instead:

.x-navbar-inner {

background-color: #217f0c !important;

}

If you want to move the white line below the navbar please add the following code:

.x-navbar-fixed-top-active .x-navbar-wrap {
border-bottom: 0px;
}

Hope that helps,

Joao

[amyhern]

Hi Joao,

.x-navbar-inner {

background-color: #217f0c !important;

}

That code above did not work. It didn’t change anything. Other ideas? Do I need something specific for Ethos?

Regards,

Amy

[Friech]

Hi Amy,

There are syntax errors on your custom css in Customizer that needs to be corrected before we proceed. Look for this blocks of css code on your Customizer and address it.

This block is missing the closing curly braces “}”.

.text-white .x-icon {
 color: #fff;

This one as well.

#x-content-band-7 {
 border-top: none;

And this one you added a closing bracket instead of a curly braces “}”

.x-btn {
  font-size: 50px !important;
)

After you address that issues, try to add again the code my colleagues suggested above. If nothing works, please add this code.

.x-nav-wrap.desktop {
	background-color: #217f0c !important;
}

Hope it helps, Cheers!

[amyhern]

That worked! Thanks!

[Thai]

You’re most welcome 🙂

[Author]

Posts