Are you interested in making certain menu items stand out on your WordPress site? Drawing attention to specific menu items can effectively guide users towards important sections of your website, such as the Pricing or Contact Us pages. In this comprehensive guide, we will show you step-by-step how to easily highlight a menu item in WordPress using CSS code.
How to Highlight a Menu Item in WordPress
A navigation menu consists of a list of links that direct users to important sections of your website. Usually displayed as a horizontal bar at the top of every page on a WordPress website, highlighting a menu item in your navigation menu can easily guide users towards your most important call-to-action.
If you want to highlight a menu item in WordPress using CSS, follow these simple steps:
Step 1: Access the Full Site Editor
If you’re using a block-enabled theme, you’ll have access to the Full Site Editor, an updated version of the older Theme Customizer. To begin, navigate to the Appearance » Editor page in your WordPress admin dashboard. This will take you to the Full Site Editor.
Step 2: Select the Menu Item to Highlight
Within the Full Site Editor, locate the specific menu item that you want to highlight and double-click on it. Then, click on the ‘Settings’ icon at the top of the menu item. This will open the menu item’s specific settings in the block panel.
Step 3: Add a CSS Class
Scroll down to the ‘Advanced’ tab and click on the arrow icon to expand it. You will see an ‘Additional CSS Class’ field. In this field, enter the class name ‘highlighted-menu’.
Step 4: Save Changes
Click the ‘Save’ button at the top of the page to save your changes. The menu item you selected will now be highlighted.
Using the WPCode Plugin to Add CSS Snippets
To add CSS code to your WordPress site, we recommend using the WPCode plugin. This user-friendly and secure plugin allows you to easily insert CSS snippets. Here’s how to install and use the WPCode plugin:
1. Install and activate the WPCode plugin. (Please note that a premium plan is required for the ‘CSS Snippet’ option.)
2. Go to the ‘Code Snippets » + Add Snippet’ page.
3. Click on the ‘Use Snippet’ button under ‘Add Your Custom Code (New Snippet)’.
4. Give your snippet a name and select ‘CSS Snippet’ as the code type.
5. Copy and paste the CSS code provided here into the ‘Code Preview’ box.
6. Set the ‘Insertion’ mode to ‘Auto Insert’.
7. Toggle the switch from ‘Inactive’ to ‘Active’ and click ‘Save Snippet’ to store your settings.
Highlighting a Menu Item with an Older WordPress Theme
If you are using an older WordPress theme, follow these steps to highlight a menu item using the theme customizer:
1. Go to ‘Appearance » Customize’ in your WordPress dashboard.
2. Click on the ‘Menus’ tab.
3. Click on the gear icon at the top right to access advanced properties.
4. Check the ‘CSS Classes’ box.
5. Scroll down to the ‘Menus’ section and select the menu that contains the items you want to highlight.
6. In the new tab that opens, choose the specific menu item you want to highlight.
7. Click into the ‘CSS Classes’ field and enter ‘highlighted-menu’.
8. Go to the ‘Additional CSS’ tab in the theme customizer.
9. Copy and paste the provided CSS code into the editor.
10. Click the ‘Publish’ button to save your changes.
Customizing the Highlighted Menu Item
Once you have successfully highlighted a menu item, you can further customize its appearance. For example, you can change the background color or other properties to match your website’s design. In the provided CSS snippet, search for the code that specifies the background color:
background-color: #FFC0CB;
Replace the hex code ‘#FFC0CB’ with your desired color code.
After making any adjustments, click ‘Publish’ in the theme customizer or ‘Save Snippet’ using WPCode to save your changes.
Congratulations! You have learned how to highlight a menu item in WordPress. For more WordPress tips and tutorials, make sure to subscribe to our YouTube Channel and follow us on Twitter and Facebook.
In Conclusion
Highlighting menu items using CSS is an effective way to draw attention to important sections of your WordPress website. By using the methods described in this guide, you can easily highlight menu items and guide your users towards your desired actions. Customize your menu item highlighting to match your website’s design and enhance the overall user experience.
