[Vik RParticipant]

In Customizer, I see a control to change the color of the Widgetbar Button, but I haven’t yet found a place to change the color of the nav bar itself. Where is the control that permits me to change that color?

[Ryan PParticipant]

Here are a few lines of CSS that I have found useful for the topbar and navbar

Change the Navbar Color

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

Change the topbar Color

.x-topbar {
background-color: #000000;}

Remove the border between the navbar and the top bar

.x-topbar {
border-style:none;}

Move the Sub Menu items further up or down

.x-navbar .x-nav > li > .sub-menu {
top: 45px;
}

Used to hide the logo bar when the logobar and navbar are stacked
Good if you have your logo in the image above the masthead.

.x-logobar {
display:none;}

[Vik RParticipant]

Thanks very much. Isn’t it odd that there’s no control to change the navbar color, given the wealth of controls that are available?

[SupportMember]

Hi there!

Thank you for using the theme!

@Ryan: Thanks for helping out!

@Vik R: Actually, you can change the navbar color on Customizer > Typography > Navbar panel. You can select the color, hover color, font style and weight etc. I hope that helps. If you have the time, please review all of the resources on the Knowledge Base.

Cheers!

[Vik RParticipant]

Thanks for the feedback! I’m in Customizer->Typography->Navbar, and I see color controls for Navbar Links and Navbar Links Hover, but not for the Navbar itself, i.e. the color behind the text. Note- I’m currently in the Icon layout. Am I missing something?

[AlexanderKeymaster]

Hi Vik,

I’m sorry, we were referring to the Menu items above.

There are controls to change the navbar color, but it depends on the stack. If you use Renew, you’ll have more options over color. Integrity is more limited to the “light / dark” options. We’re pretty intentional about the controls made available, and the decision usually revolves around what should be allowed to be changed while still keeping the Stack’s design consistent.

But all that doesn’t mean you still don’t have total control!

For when you don’t have control in Customizer, you can always refer to the CSS class index. This will give you the classes you need to target elements like the navbar for advanced customizations.
http://theme.co/x/member/kb/css-class-index/

For example, in Icon you can change the navbar color with this CSS. (Customizer > Custom > CSS)
.x-navbar {background-color: #123;}

[Vik RParticipant]

Very good. Where may I find the CSS class index?

[Vik RParticipant]

Oh okay – I see the link your provided. Thanks!

[ChristianModerator]

You’re welcome Vik.

[bgwindowfashionsParticipant]

What about the line that is above the menu items on the navbar? It shows up on hover as well as when you’re on that particular page. I’ve changed this color in the past but now can’t seem to find where it is.

I’m using Integrity.

Thank you

[ThaiModerator]

Hi @bgwindowfashions,

Please try with this CSS:

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: inset 0 4px 0 0 #ff2a13;
}

Hope it helps 🙂

[bgwindowfashionsParticipant]

I will try that, thanks. I could have sworn I changed the color of this before without css, though. I don’t have anything currently in the customizer, and the blue I was using was not default. So how would I have changed the color?

[RupokMember]

Hi there,

Thanks for updating. If you provide your URL, we could check.

Cheers!

[IanHepParticipant]

If you dont mind me saying – as someone new to X-theme (it is great), and who has only basic web programming knowhow (love menus, know nothing about codes, CSS, etc. Changing a navbar background colour seems to be basic functionality to me, like the main content area. I dont understand why you wouldnt make it an available customizer choice for everything. This is why I am using Renew….I hope that choice doesnt mean that some other functionality I want later is made more difficult.

[RadModerator]

Hi there,

It’s very basic, and can be done through CSS. The purpose of the theme is a framework, and we’re trying to avoid any bloated feature making it minimal as much as possible. Though, imagine that those libraries are needed to be loaded even if you’re already done designing your site. And a color picker requires multiple libraries.

Though, noting this one 🙂

Thanks!

[Author]

Posts