Menu | Active Link color do not apply

galpao · February 2015

HI!

I'm trying to set my custom color for active link on menu, but I can't get it working.

www.galpaodecriacao.com.br

user/pass sent via PM

Albert · February 2015

Hey,

this is weird because it should work. Maybe your other style from css section for example overwrite this color. So in this case you can use below css and this should help you:

#Top_bar .menu > li.current-menu-item a span { color: #000 !important; }

galpao · February 2015

I do not have any customization of colors, except the css below:

#Action_bar { display: none; }
#Top_bar #logo { height: 160px; }

@media only screen and (min-width: 1240px) {
#Top_bar:not(.is-sticky) .search_wrapper { top: 120%; }
}
#Footer .footer_action,
#Footer .widgets_wrapper { display: none; }
#Footer .footer_copy .social li a { color: rgba(0, 0, 0, 0.3); }
#Footer .footer_copy .social li a:hover { color: rgba(0, 0, 0, 0.6); }

Albert · February 2015

So please use css that we gave you above and this will do what you need.

galpao · February 2015

OK no problem... CSS overwriting works... but, what about the front-end?

Is it bugged?

Albert · February 2015

There is no bugs in this case. Probably there is css somewhere deeper for that.

Laucys · February 2016

Hey, i used the same code, but nothing works. My custom css:

#menu { background-color: #e88888 !important; }

.flat_box .desc_wrapper h4 i { font-size: 80%; opacity: 0.6; }

@media only screen and (min-width: 768px) {

#pay_for_results .column_image { margin-bottom: 0; }

#pay_for_results .image_frame { margin-top: -172px; position: relative; z-index: 28; }

}

/************************ Footer ************************/

#Footer .footer_copy {

border-top: 1px solid rgba(0, 0, 0, 0.1);

}

#Footer .footer_action {

background: rgba(0, 0, 0, 0.2);

}

#Footer .footer_action a {

color: #747474 !important;

}

Albert · February 2016

@Laucys Pleas explain what you want to do and on on what page.

Laucys · February 2016

My website : http://www.laucys.lt/projektai/mergvakaris/

I would like to make menu like this :

http://i.imgur.com/EYi1Bru.jpg

Albert · February 2016

@Laucys To make the same header as on screenshot, you need to use the following css:

#Top_bar #menu { background: #000 !important; }
#Top_bar .menu_wrapper { background: #000 !important; width: 120% !important; margin-left: -10% !important; }
#Top_bar .menu > li > a span:not(.description) { color: #FFF !important; }
#Top_bar .menu > li > a:hover { background: #000 !important; }
#Top_bar .menu > li > a:hover span { color: #FFF !important; }

Laucys · February 2016

THANKS, that works fine, except now my logo doesn't fit to menu : http://i.imgur.com/QxfYiP2.png

When I delete this row:

#Top_bar .menu_wrapper { background: #000 !important; width: 120% !important; margin-left: -10% !important; }

than logo fits good, but not entire menu is wanted color like this : http://i.imgur.com/KoDWiID.png

Albert · February 2016

We did one mistake in above css. Instead of css we gave you previously, you need to use the following one:

#Top_bar:not(.is-sticky) #menu { background: #000 !important; }
#Top_bar:not(.is-sticky) .menu_wrapper { background: #000 !important; width: 120% !important; margin-left: -10% !important; }
#Top_bar:not(.is-sticky) .menu > li > a span:not(.description) { color: #FFF !important; }
#Top_bar:not(.is-sticky) .menu > li > a:hover { background: #000 !important; }
#Top_bar:not(.is-sticky) .menu > li > a:hover span { color: #FFF !important; }

Laucys · February 2016

Thank you, but now when you scroll down menu change color: http://i.imgur.com/qjGpb1H.png, in previous css color didn't change,

Albert · February 2016

This is sticky header. To change bg color of sticky header, you need to use:

#Top_bar.is-sticky { background: #000 !important; }
#Top_bar.is-sticky #menu { background: #000 !important; }
#Top_bar.is-sticky .menu > li > a span { color: #FFF !important; }

Menu | Active Link color do not apply

Comments