How to get menu Items to change style when current/relevant page is displayed

Hi,

[Please advise using the demo site as the example as my site is in still in development.]
I would like the main navigation’s menu items to change style (e.g. from black and normal weight to orange and bold) when the corresponding active page is shown. This is to help users to orient to where they are in the site as Portfolio page is used as my Homepage. I have 4 main navigation links (Portfolio, Blog, About Me, Contact). I tried this code but it only seems to work some of the time:

.nav-menu .current-menu-item > a,
.nav-menu .current-page-item > a,
.nav-menu .current-menu-item > ul > li > a,
.nav-menu .current-page-item > ul > li > a
{
  color: #F35029;
  font-weight: bold;}

Thank you!

• This topic was modified 4 years, 1 month ago by nicoleWP.