Diffrent Menu link color for diffrent pages

mcontes · December 2015

Hi Guys,

I need to change the color of the link text on my homepage's menu because I am using a transparent menu option and a dark image as background. All other pages are fine. Is there a way to do this. Ive been trying layouts option, color option and no luck.

Albert · December 2015

Hi,

this can be done with custom css. If you will send us link to example page, we tell you how this can be done.

mcontes · January 2016

Here it is.

http://graficas.biz/Ofimeds

AS you can see there is no problem in the home page but then other pages with white backgrounds you cant see the link text.

Albert · January 2016

Ok. So to change menu link color on inner pages, please use extra css:

body:not(.home) #Top_bar .menu > li > a { color: #000 !important; }

mcontes · January 2016

Worked like a charm except 2 things

Since i have another inner page with dark photo background i cant see the text link. Here is the link http://graficas.biz/Ofimeds/areas-de-entrega/
the Hightlighted link text is black when it should be white.

Can you help me out with this please?

Albert · January 2016

Hi,

To change color & hover color please use below css with your page ID

body.page-id-32 #Top_bar .menu > li > a {
    color: #ffffff !important;
}

body.page-id-32 #Top_bar .menu > li.hover > a {
    color: #000000 !important;
}

Thanks!

mcontes · January 2016

Thanks! It worked. I can now change menu color text on individual pages thats great, but with the top CSS i still have 2 little problems.

1. Menu Link text on selected page is black when it should be white when selected

See Example: http://www.clipular.com/c/5637750519234560.png?k=m6Q34pzHmyXjo-pgGyiNU9hWN0w

2. Since all header menus on mobile devices have white backgrounds and text is also white the user can't see them.

See example: http://www.clipular.com/c/5864823158472704.png?k=WaS3cXlB5OB1ec3oMXlBx5A6GcE

How can i have Black Text, white text on hover, and white text link when selected on mobile responsive menu?

Albert · January 2016

1. Are you sure that you used proper css for that page? Please provide the link to page where you changed menu items color with custom css so we can have a look on it.

2. You can change menu background color on mobile then:

#Top_bar #menu { background: #000 !important; }

mcontes · January 2016

1. Yes. http://graficas.biz/Ofimeds/ordene/

2. Changed the Background but still having the problem with the page i previously changed the text to black. Now users cant see the menu because background is black and text is also black.

Albert · January 2016

1. We did checked that page and looks like everything is fine on this page. The css is:

body.page-id-23 #Top_bar .menu > li > a {
    color: #000000 !important;
}

body.page-id-23 #Top_bar .menu > li.hover > a {
    color: #ffffff !important;
}

and it works exactly that way. Menu items are black (#000000) and are white (#FFFFFF) on hover.

2. So what you want to to exactly? Change menu items color to white on mobile? If that's what you mean, use:

@media only screen and (max-width: 767px) {
    #Top_bar #menu ul li a { color: #FFF !important; }
}

Diffrent Menu link color for diffrent pages

Comments