Change menu item color using CSS in page

prins063 · June 2017

Hi,

is it possible to change the color of an menu item, depending on which page is active?

Now, when i click on the menu item 'Projects' the page opens a page with a portfolio overview. The menu item 'Projects' is active then (color red in stead of black).

When clicking on one of the portfolio items, it opens a portfolio detail page. In this case the menu-item 'Projects' is not active anymore.

So: is it possible (for example, using the custom CSS option per page) to make a specific menu-item active?

Hope you know what i mean, thanks in advance!

kind regards, henk.

prins063 · June 2017

fixed it almost:

li#menu-item-352 span

{

color:red;

}

But when i scroll, i'd like this to activate also on the sticky menu

Bryan · June 2017

Hello,
If you want custom css then please send us a link to your website.
thanks

prins063 · June 2017

well, thanks for responding.

it's working now on pages. But i can't find a Custom CSS option on a portfolio item, or am i overlooking something?

best regards, henk.

prins063 · June 2017

On this page it works:

http://www.henkontwerpt.nl/ontwikkel/waa/waa-bureau/

On this portfolio item it does not work: i'd like the menu 'Projecten' to be red:

http://www.henkontwerpt.nl/ontwikkel/waa/portfolio-item/roc-friese-poort-sneek/

Bryan · June 2017

Have you set up the portfolio page using the builder items or did you set it up in theme options>blog,portfolio&shop>portfolio? See screen: http://prntscr.com/fgxjg7

prins063 · June 2017

i used the builder items. I (temporarily) solved this by installing a 'custom css' plugin which allows me to add custom css to the portfolio item.

Most important for me no is to fix this problem:

But when i scroll, i'd like this to activate also on the sticky menu, when i scroll now the menu item becomes black (and stays bold)

Bryan · June 2017

We do not know why it turns bold, you have used some third party plugin which we do not support. You could just enter your custom css in theme options>custom css&js>css

prins063 · June 2017

thanks for responding, but when i enter this custom css in theme options>custom css&js>css this will appear on all pages: that's not what i want.

prins063 · June 2017

fixed this with this CSS. Not sure this is the proper way, but it works.

li#menu-item-135 span

{

color:#e42313;

font-weight:bold;

}

#Top_bar.is-sticky li#menu-item-135 span

{

color:#e42313;

font-weight:bold;

}

Bryan · June 2017

thats fine, if it works

Teeklassic · September 2021

It makes no sense that a simple function to change the color of menu items is not in this theme...

Phil · September 2021

Hello @Teeklassic,

This is an old discussion, many things changed, and there is an option for that.

An option for it is placed, in Betheme -> Theme options -> Colors -> Menu.

Thanks

Change menu item color using CSS in page

Comments