Mastering WordPress: 2 Easy Ways to Highlight Menu Items for Maximum Impact

Highlighting a menu item in WordPress effectively captures your visitors’ attention towards important pages or special offers, enhancing navigation and user engagement.

Whether you’re promoting a new feature, a sale, or a crucial update, making specific menu items more noticeable can significantly enhance your site’s performance.

For instance, we have emphasized the pricing page in the main navigation menu of many partner brands to attract users’ attention. This strategy has led to more visitors exploring our product pricing, resulting in higher conversion rates.

In this article, we will guide you through the simple process of highlighting a menu item in WordPress using CSS code.

Why Should You Highlight a Menu Item in WordPress?

A navigation menu consists of links that direct users to key areas of your site, typically displayed as a horizontal bar in the header of every page on a WordPress website.

By highlighting a menu item in your navigation, you can effectively guide users’ attention to your most important calls to action.

For example, if you want to encourage users to visit the pricing page or a specific blog post, highlighting that item in your navigation menu can increase traffic to that page and boost sales.

Now, let’s explore how to highlight a menu item in WordPress using CSS.

• Method 1: Highlighting a Menu Item with the Full Site Editor
• Method 2: Highlighting a Menu Item with the Theme Customizer
• Customizing the Highlight for Your Menu Item

Method 1: Highlighting a Menu Item with the Full Site Editor

If you are using a block-based theme, you will have access to the Full Site Editor instead of the traditional Theme Customizer. This allows you to easily highlight the current menu item.

First, navigate to the Appearance » Editor section in the WordPress admin dashboard. This will take you to the Full Site Editor.

Here, simply double-click on the menu item you wish to highlight, then click the ‘Settings’ icon located at the top. This will open the settings for that specific menu item in the block panel.

Next, scroll down to the ‘Advanced’ tab and click the arrow icon next to it to expand the section.

This will reveal an ‘Additional CSS Class’ field where you should enter highlighted-menu.

Finally, click the ‘Save’ button at the top of the page to apply your changes.

Next, you will need to add a small amount of CSS to your theme to create the highlight effect. You can either resolve the issue with the missing Theme Customizer or utilize a code snippet plugin to incorporate the CSS code.

How to Incorporate CSS Snippets Using WPCode

For adding CSS to your WordPress site, we recommend using WPCode, the leading WordPress code snippets plugin that ensures safe and straightforward integration of custom code.

First, install and activate the WPCode plugin. For detailed instructions, refer to our comprehensive guide on installing a WordPress plugin.

After activation, go to theCode Snippets » + Add Snippetsection in your WordPress admin dashboard.

Here, hover over the ‘Add Your Custom Code (New Snippet)’ option and click the ‘+ Add Custom Snippet’ button that appears below it.

Next, select ‘CSS Snippet’ from the list of code type options that are displayed.

You will then be directed to the ‘Create Custom Snippet’ page, where you can begin by naming your snippet.

Next, paste the following CSS code into the ‘Code Preview’ box:

/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Here’s a preview of how it will appear:

After that, scroll down to the ‘Insertion’ section.

Select the ‘Auto Insert’ mode to ensure the code runs automatically across your entire website.

Now, navigate to the top of the page and switch the toggle from ‘Inactive’ to ‘Active’.

Then, click the ‘Save Snippet’ button to save your changes.

You have successfully highlighted a menu item in WordPress using the full site editor.

This is how your menu item will appear after adding the CSS code.

How to Access the Theme Customizer with a Block Theme

To use the Theme Customizer with an FSE theme, copy and paste the URL below into your browser, replacing ‘example.com’ with your actual domain name:

https://example.com/wp-admin/customize.php

This will open the theme customizer for your block theme, where you can expand the ‘Additional CSS’ tab.

Copy and paste the CSS code into the ‘Additional CSS’ section:

/* Highlighted menu */
.highlighted-menu {
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Then, click the ‘Publish’ button at the top to save your changes.

Method 2: Highlighting a Menu Item with the Theme Customizer

If you’re using an older WordPress theme, it likely has the theme customizer enabled by default. Highlighting a menu item using the theme customizer is a straightforward process.

First, navigate to Appearance » Customize in your WordPress dashboard to open the theme customizer. Once it opens, click on the ‘Menus’ tab in the left sidebar.

Next, click the gear icon in the top right corner to access advanced settings.

Now, check the ‘CSS Classes’ option.

After that, scroll down to the ‘Menus’ section.

If you have multiple WordPress menus, click on the menu containing the items you wish to highlight.

This will open a new tab where you can choose the menu item you wish to highlight. It could be ‘Contact Us’ as shown in our example, or it might be your pricing page or the link to your online store.

Simply click on your desired menu item to reveal additional settings. Here, select the ‘CSS Classes’ field.

All you need to do is enter 'highlighted-menu' in the field. You can apply this CSS class to multiple menu items, and they will all be highlighted.

Next, navigate to the ‘Additional CSS’ tab in the theme customizer.

Then, copy and paste the following CSS code:

/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}

Congratulations! You have successfully highlighted a menu item.

Finally, remember to click the ‘Publish’ button at the top to save your settings.

Enhancing Your Menu Item Highlight

Once you’ve highlighted the menu item, you can modify the CSS code to personalize it to your liking.

For instance, you can alter the background color of your menu item.

Simply find the following code in the CSS snippet you just added:

background: #FFB6C1

After locating it, replace the pink color code with the hex code of any color you prefer:

background: #7FFFD4;

The hex code above represents aquamarine.

Check out our guide for adding custom CSS for more ideas on customizing your highlighted menu item.

Once you’re happy with your selections, click the ‘Publish’ button in the theme customizer or ‘Save Snippet’ in WPCode to apply your changes.

We hope this article has helped you learn how to highlight a menu icon in WordPress. You may also want to explore our beginner’s guide on styling WordPress navigation menus or our tutorial on adding image icons to navigation menus in WordPress.

If you enjoyed this article, consider subscribing to our YouTube Channel for insightful WordPress video tutorials. Connect with us on Twitter and Facebook for more updates.