Set active color in a menu

[flavoni]

Im trying to set an active, hover etc to categories in a menu.
But im failing in my attempt, would appriciate some help.

The site: klvunge.mystagingwebsite.com

[Atelierbram]

What have you tried so far? Can you show this in a demo? Do you mean highlighting the current menu item?

#site-navigation .current-menu-item a {
  background-color: white;
  color: blue;
}
#site-navigation .current-menu-item a:hover {
    pointer-events: none;
    cursor: pointer;
}

Or do you mean using pseudo class selectors in general?

[Paulie_D]

Also be aware that there is a difference between the :active pseudo-class and the “active/current” link.

The latter is usually applied by javascript although there are other techniques depending on the size of the site.

[flavoni]

Atelierbram < Amazing, its worked!
You´re the best!

Is it somehow possible to achieve the same result when clicking on a project instead of a category-item, example https://klvunge.mystagingwebsite.com/2016/11/drawing-on-hell/ , where the category “drawings” should be highlighted in blue in this case.

[Atelierbram]

@flavoni Glad to be of help. Do you use (Chrome) Devtools to “inspect element” in the browser? Then you can see that dynamic markup for yourself … Anyway, here you can use the current-post-parent class set on the list item, like:

#site-navigation .current-post-parent a {
  background-color: #fff;
  color: blue;
}

Can also combine those rules like:

#site-navigation .current-menu-item a,
#site-navigation .current-post-parent a {
  background-color: #fff;
  color: blue;
}

[Author]

Posts