I’m customizing a WordPress theme for my school, and I’m a bit annoyed by the fact that the current page in the nav menu is not indicated.
For example:
You can clearly see that I’m hovering over a page in the nav menu, and that the page I’m hovering over is highlighted, as expected.
However, the page that I’m currently on, called “Arhiva”, is not highlighted, and I think that this can be somewhat confusing.
I don’t want the current page and the page the mouse is hovering over to be highlighed in the same manner though. I believe that a bold entry text in the nav menu would do just fine to separate the current page from other pages.
How can I achieve this?
Theme’s current CSS can be viewed here: http://petagimnazija.hr/wp/wp-content/themes/chiron/style.css.
The Navigation Menus system is adding a lot of classes, including matching current page (rather intelligently, it will even try to detect custom URLs, that were input explicitly).
The simplest class to make use of is
current-menu-item, but there are quite a few more dealing with parents/ancestors and more.Codex has them documented at
wp_nav_menu()> Menu Item CSS Classes.