[johnsonmmParticipant]

I’m very new to “X” and would love some help. I would like to change the color of the top bar as well as the color of the menu. Is there a line of CSS that I can enter to change those colors? I want the top bar different from the menu color.

Website is HERE

Thank you!

[Prasant RaiModerator]

Hello John,

Thanks for writing in!

To change the top bar and navigation color, kindly add the following CSS under Custom > CSS in the Customizer:

.x-navbar-inner {
  min-height: 45px;
  background-color: #ddd;
}

.x-navbar .desktop .x-nav>li>a {
  color: #4F2A2A;
}

Note: Change the color code as per your requirement.

Hope that helps.

Thanks.

[johnsonmmParticipant]

Thank you for your response. That worked on changing the main header…but I’m also needing to change the area above that (Top Bar) where it currently says “Test”.

Any help would be greatly appreciated.

Thank you,

-Nathan

[John EzraMember]

Hi Nathan,

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

.x-topbar {
    background: #ffffff;
    border: none; /*in case you want to border on topbar */
}

Hope this helps – thanks!

[johnsonmmParticipant]

Awesome Thanks so much! One more really quick question. How can I do the same for the footer?

Thanks so much! y’all are absolutely awesome..and by the way, X4 is just plain AWESOME! Great work!

-Nathan

[Nabeel AModerator]

Hi Nathan,

You can use the following code to change the footer background color:

.x-colophon.top, .x-colophon.bottom {
  background-color: #000 !important;
}

Let us know how this goes!

[johnsonmmParticipant]

You’re so awesome! Love X TONS! Its the first theme that I’ve found that will work for almost any client!

Awesome job!

-Nathan

[Prasant RaiModerator]

You are most welcome 🙂 . Glad we could help. If you have any questions or concerns, feel free to post here and we’d be happy to provide further assistance!

[Author]

Posts