When designing your website in WordPress block themes, you may have noticed that the main navigation for your site has limited styling options. For example, when you click on a page link in your main navigation to visit a page on your website, the link for the active page doesn’t change color inside the main navigation. In other words, there’s no indication for the user as to what page they’re currently on.

Good user experience says site visitors should always have some sort of indication as to where they are on your site – it helps keep them from getting lost.

In this tutorial, I’ll show you how to quickly customize your site navigation in WordPress block themes to display a custom color for the active page. I’ll be using the Twenty Twenty Four theme for this demonstration.

Step 1: Navigate to the Block Editor

From your WordPress Dashboard, go to Appearance>Editor (red arrow in the above photo). This will take you to the Site Editor.

Click the main content area to the right of the menu. This will take you inside the Block Editor.

Step 2: Add Custom CSS

Next, click on the “Styles” icon in the top right corner of the Block Editor.

Click the “More” icon (the vertical three dots icon), then click “Additional CSS.”

Paste the following CSS code into the “Additional CSS” text box:

.current-menu-item {
  color: #e23f1b;
}

Replace the value between the “#” symbol and the “;” symbol with the hex code for any color you want to use (you can get color hex code values within WordPress by editing anything that has a color value, or by using a color tool like HueMint or Coolors).

Click the “Save” button at the top of the Block Editor, then click “Save” again.

Step 3: View Page

With your changes saved, you can now click the “View Page” icon to preview your site with the new color for the active page in your main navigation.

Troubleshooting

If the above code didn’t work for you, you may be using a theme that uses different classes for active menu items, or you may be using custom links in your navigation block rather than page links.

Non-Block Themes or Third-Party Block Themes

To resolve the former issue, you’ll have to use the “inspect” tool in your browser and figure out what class is used for active page links in your main navigation (you can also try Googling “What class does ____ theme use for active page links in the main navigation”).

For the latter issue, simply change your custom links to page links inside the Site Editor. To do this from within the Block Editor, click on the logo in the top left corner of the editor (will be the WordPress logo or your site’s logo).

Then, click “Navigation.” Click the “Edit” icon next to the name of your site’s main menu.

Click on the navigation menu to edit it. Then, click “Go to parent navigation block” in the Block Settings Sidebar if not taken there by default.

Under the “Menu” heading in the Block Settings Sidebar, you’ll see a list of all your pages that are in your main navigation. If you have any site pages in the navigation that are listed as a custom link (like the bottom entry in the example photo), you’ll have to delete the entry and re-add it as a page (if possible).

To do this, click the “Options” icon next to the entry, then click “Remove ____.” Next, click the “+” icon at the bottom of the page list.

Next, click “Page Link,” then find the page you’d like to add. Once you’ve added the page, click “Save” and click “Save” again. The issue should be resolved.

Pin It on Pinterest