Different colors in navigation menu

adfellas · June 2015

Hi there,

would like to change the color of the buttons in my menu. Unfortunately it just flashes the desired color for a second and then goes back to the color set in the "Menu | Active Link background" within "Design > BeTheme Options"... is there a way to change that... I would like every button to have a different color onHover and the font to stay in that color when the page is active.

Here´s the site: http://gnt.adfellas.de

Many thanks in advance for your help.

Cheers - Daniel

adfellas · June 2015

Oh, just to see what happens... hover over the menu-button "MES"... I would like it to stay "blue"...

Albert · June 2015

Hi,

if you want to get different color per different menu item then you must activate CSS classes option for menu items. Then, for each item you must assign own class and under Theme options > Custom CSS & JS > Custom CSS section you must write custom css for each menu item.

adfellas · June 2015

Thanks for the classes advice - it worked so far. BUT there is still something "overwriting" the blue (see http://gnt.adfellas.de/ and hover over MES in the menu)... it looks like there is a transition from the "hover" to something else. Something I couldn´t find yet... could you please help me once again.

Many thanks,

Daniel

adfellas · June 2015

I think it could be one of these jquerys... but thats where my js skills end... I´d appreciate any help you could give me ;-)

thanx - daniel

Albert · June 2015

Please show us on screenshot which color you exactly want to change.

adfellas · June 2015

OK, here is what I my client asked me for:

menu button #1:
onHover: bg-color = #color1, font-color = #ffffff
when you are on that page: font-color = #color1

menu button #2
onHover: bg-color = #color1, font-color = #ffffff
when you are on that page: font-color = #color2

menu button #3:
onHover: bg-color = #color1, font-color = #ffffff
when you are on that page: font-color = #color3

menu button #4:
onHover: bg-color = #color1, font-color = #ffffff
when you are on that page: font-color = #color4

See the attached and screenshot with indications - sorry, hope now it´s easier to understand.
When you hover over "MES" it gets "blue" (#color3) for a second but turns "red" imediatly after that... just try it (http://gnt.adfellas.de)

Thanks for your help and patience...

Regards - Daniel

Albert · June 2015

We can't give you solution for each but we can show you how to do this. So each menu item must have own custom class what we described in previous message. Please set custom class name for one of menu items and let us know so we can show you how to do this.

adfellas · June 2015

Many thanks for your support. I have set a class for each button:

PDM = menu-pdm
CAM = menu-cam
MES = menu-mes
DNC = menu-dnc
SUPPORT = menu-support
ÜBER UNS = menu-about

Maybe it would be easier to just "turn off" that "overwriting transition"...

Thanks for your help.
Cheers - Daniel

adfellas · June 2015

If it helps - here is my custom CSS for the MES button:

.menu-mes.hover {
background-color: #43a1da;
color: #ffffff;
}

Greetz - Daniel

Albert · June 2015

So to be sure, you want to change only colors on hover for these menu items, right?

adfellas · June 2015

Well I want to change the hover and the "marked" color too... So that when you are on the MES page the font MES is in the according color and the background white. Just as it is on the "basic" theme: http://themes.muffingroup.com/be/business/clients/

Thanx - greets - Daniel

Albert · June 2015

Ok. So you can change these colors with css as below:

#Top_bar .menu > li.menu-pdm a:hover {
    color: red !important;
}
#Top_bar .menu > li.menu-pdm a {
    color: blue !important;
}

#Top_bar .menu > li.menu-pdm { background: #000 !important; }
#Top_bar .menu > li.menu-pdm a:hover { background: #E2E2E2 !important; }

This is css for 1 item only. The same code you must use for each item (just change the class of li).

adfellas · June 2015

Thank you sooo much - it works fine for the hover. Great job!

Now I would have just one more (sorry could have seen that before - but somehow I didn´t :-/ ):

when on the page (see http://gnt.adfellas.de/mes/) I would like the background to be "white" again and only the "font" (MES) to be "blue" (like the hover bg-color). Would you mind helping me on that tooo

Many thanks -

Daniel

Albert · June 2015

If you want background to be white, do not use 3rd line of css that we gave you above.

adfellas · June 2015

Sorry - I think you got me wrong (my english is not that good ;-)):

The "hover"-effect works fine.
But when you click on "MES" and land on the "MES" page the button has a red background again and the font is black. And I would like it to have a white background and a blue font...

Could you please help me once again with that?

Many thanx, Daniel

adfellas · June 2015

I think it is the "current_menu_item" or "current_page_item"... but I just can´t get it too work.
So I´d appreciate any help...

Thanx

Albert · June 2015

Yes, this is what we mean exactly. But as we see in the code, you don't have active class for menu item. But this is something on your side because only wordpress is responsible for this behavior. So you must look for a problem on your side because this is not related with theme at all.

adfellas · June 2015

I don´t think so... it works on your demo page: http://themes.muffingroup.com/be/business/clients/
See the blue "clients":

Albert · June 2015

We think that we missed something and we talk about something else. Please once again explain what exactly you want to do and we'll have a look on it once again.

adfellas · June 2015

I think it might be easier if I explain it in differen "steps". Please follow them and you will see what I mean:

1. goto http://gnt.adfellas.de
2. hover over the menu button "MES" -> it turns "blue"... this is perfect (once again - thanks for that
3. now click on the menu button "MES" (you will land on the page http://gnt.adfellas.de/mes/)
4. now look at the font-color and the background-color of the menu button "MES" (it has a "red" background and a "black" font)

And my wish is:
on points 3. and 4. of the above list (when on page http://gnt.adfellas.de/mes/) I want the menu button "MES" to look like this: "white" background and "blue" font-color

And I want to do this with every button on the menu... giving each button a different color, like we did on the "hover"...

Does this help you understand my problem?

Thank you very much for your patience with me... I really appreciate this kind of "service".

Best regards - Daniel

Albert · June 2015

Ok. We got it now. Sorry but we've been thinking about something else. So to do this for current menu item, please use below css:

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

adfellas · July 2015

Worked! Mission acomplished.
Have a great day!
Regards - Daniel

Albert · July 2015

You're welcome

Different colors in navigation menu

Comments