How to highlight menu item while on current page

Website navigation has definitely changed after WordPress introduced custom menus in version 3.0. Everything became easier and more beautiful, and we got a much simpler way of creating menus we really want on our website.

Among many features, highlighting a menu item which represents a page you are currently on isn’t that hard as it was before. To highlight a menu item, all you have to do is add a small piece of CSS code and style your menu as you want.

    1. Open style.css
    2. Paste the following code:
.main-navigation li.current-menu-item > a{
color: green;
font-weight: bold;
}
  1. Save changes

This is the easiest way you can change a color of your menu item once a page is activated. This will work for default themes like Twenty Fifteen, but if you have a custom theme, chances are you will already have a custom menu with its custom name.

To change that menu, you will first have to find the name of your menu. An easy way of finding that out is to inspect the element in your browser. If you use Chrome or FireFox, simply right click on your menu item and choose “inspect element” from the drop-down menu.

If you do that on your Twenty Fifteen theme, on the right side of the inspection tab, you will notice that you menu class is “.main-navigation” like in the above-given sample. Other themes will probably have different classes or IDs specified with a certain selector.

For example, with Permatex theme, if you inspect a menu element, you will notice the menu has #navigation ID which means you will have to use the same one if you want to highlight your menu correctly. So, your CSS code for Permatex would go something like this:

#navigation li.current_page_item a{
color: blue;
}

It will be the same with other themes, and you will simply have to change the ID or the class your theme is using for the menu.

START YOUR OWN BLOG

This guide is an introduction to mastering the art of blogging. It provides easy to follow steps to start, maintain, and grow your blog.

Read the guide

Leave a Reply

Your email address will not be published. Required fields are marked *