Change menu item color using CSS in page

prins063

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

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

prins063

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

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

prins063

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

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

prins063

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

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

thats fine, if it works

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

Teeklassic

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

Phil

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

Learn more: Video Tutorials | How To | FAQ Vote on what comes next