Menu icon Foundation
Custom top bar button color not working properly

Hello,

I'm trying to use different colors for my buttons that are located in my top bar navigation. When I use the following CSS (custom_css.css) code, default Foundation 5 colors appear:

.top-bar-section ul li>a.button .orange
{
    background: #d17732; !important;
}

.top-bar-section ul li>a.button:hover .orange
{
	background: #b3672c; !important;
}

But when I remove the .orange part it works properly

.top-bar-section ul li>a.button
{
    background: #d17732; !important;
}

.top-bar-section ul li>a.button:hover
{
	background: #b3672c; !important;
}

Can anyone help me out, why do subclasses won't work properly? Thank you for reading this.

cssFoundation 5classes

Hello,

I'm trying to use different colors for my buttons that are located in my top bar navigation. When I use the following CSS (custom_css.css) code, default Foundation 5 colors appear:

.top-bar-section ul li>a.button .orange
{
    background: #d17732; !important;
}

.top-bar-section ul li>a.button:hover .orange
{
	background: #b3672c; !important;
}

But when I remove the .orange part it works properly

.top-bar-section ul li>a.button
{
    background: #d17732; !important;
}

.top-bar-section ul li>a.button:hover
{
	background: #b3672c; !important;
}

Can anyone help me out, why do subclasses won't work properly? Thank you for reading this.

Shoaib Iqbal about 5 years ago

Hi,
If you are adding orange class to a.button then you must not use space between them. see code below

.top-bar-section ul li>a.button.orange
{
    background: #d17732 !important;
}

Secondly you must not use ; (semicolon) before !important