Fixed NavBar button color

[zirgon]

Hey there,
could you please tell me how to make one button more visible like you did on one of your demo page:

http://demo.theme.co/nonprofit/

Best regards
Alessandro

[jade]

Hi Alessandro,

That was done by adding a class to the menu item then adding a custom CSS to style the menu item.

To add a class to the menu item, enable the CSS Class option under Screen Options then you should be able to add classes to the menu item.

Once you added a class, you can then add CSS code like this:

.x-navbar .desktop .x-nav > li.menu-item-fill > a > span {
    color: #00a580;
    border-color: transparent;
    background-color: #ffffff;
}

The code above assumes that the class you added to the menu item is menu-item-fill.

Hope this helps.

[zirgon]

Hi Jade,

thank you so much for that extensive explanation. The thing is, I am a completely beginner when it comes to CSS. Could you give me a hint where I can define a CSS class and where to put the code you’ve posted before?

Thank you so much
Alessandro

[jade]

Hi Alessandro,

You can add the CSS code in X > Theme Options > CSS.

Then you can add the class from the menu settings which is in Appearance > Menus, then please refer to the screenshots of my previous response.

Hope this helps.

[zirgon]

@Jade

.x-navbar .desktop .x-nav > li.menu-item-fill > a > span {
color: #00a580;
border-color: transparent;
background-color: #ffffff;
}

I put this one into CSS Options, but what kind of Class do I type in at the menu field?

[zirgon]

Oh, I got it now, ist “menu-item-fill” Sorry.

Thank you for your support

[jade]

You’re most welcome.