How to Highlight the Active Page on Your WordPress Website
Highlighting which page is active on your website helps your users understand and navigate your website more easily. This feature helps users quickly determine which page they are on when using the navigation bar. It helps avoid situations where, for instance, the user clicks on the Home button, but they are already on the Home page. This can be incredibly frustrating and confusing to the user.
We can help users avoid situations like this by highlighting which page is active on your navigation bar menu by making it a contrasting color. I recommend using a color that complements your design’s color scheme, but helps the active page menu button stand out from the others.
For example, my header background color is a very pale blue/off-white color (hex code #CDD5DB). My navigation bar page menu buttons are black when not active (#000000). To highlight the active page, I went with a medium tan color (#A68868).
Step 1: Open Your WordPress Dashboard
Step one begins in the back end of your website: your WordPress dashboard. (Step zero, if necessary, is to log in as your website admin by going to your website url /wp-admin, e.g. example.com/wp-admin.)
Step 2: Appearance > Customize
On the left hand sidebar navigate to the Appearance tab. This will open a drop down menu. Select Customize.
Step 3: Select Header
Select Header from the sidebar navigation menu.
Step 3: Select Menu
Select Menu from the sidebar navigation menu.
Step 4: Scroll to Main Styling
Scroll down to the Main Styling section of the Menu navigation menu.
Step 5: Change the Hex Code for Link Color: Current Menu Item
