Do you need to spotlight a menu merchandise in your WordPress web site?
Highlighting a menu merchandise can actually assist you to level person’s consideration to a particular space in your menu. This could be nice in order for you to spotlight the Pricing or Contact Us web page in your web site.
In this text, we’ll present you the way to simply spotlight a menu merchandise in WordPress utilizing CSS code.
Why Should You Highlight a Menu Item?
A navigation menu is a listing of hyperlinks pointing to necessary areas of your web site. They are normally offered as a horizontal bar on the prime of each web page on a WordPress website.
This navigation menu is created by including completely different menu gadgets. For extra particulars, you may see our article on how to add a navigation menu in WordPress.
A highlighted menu merchandise could be a good way to seize the person’s consideration to your most distinguished name to motion. The eyes of the guests will probably be robotically drawn to the menu merchandise once they go to your web site.
By including this characteristic, you may create a user-friendly web site and spotlight necessary menu gadgets that you really want your customers to take a look at.
That being mentioned, let’s see how one can spotlight a menu merchandise in WordPress utilizing CSS.
Method 1. Highlighting a Menu Item Using Full Site Editor
If you’re utilizing a block-enabled theme then you definitely’ll have the Full Site Editor as an alternative of the older Theme Customizer. You can simply spotlight a menu merchandise in it as nicely.
First, head over to Appearance » Editor from the WordPress admin dashboard. This will direct you to the complete web site editor.
Here merely double-click the menu merchandise you need to spotlight, after which click on the gear icon on the prime. This will instantly open up that particular menu merchandise’s ‘Settings’ block.
Simply scroll down in the ‘Settings’ block to the ‘Advanced’ tab and click on the arrow icon beside it to broaden the tab.
This will open up an ‘Additional CSS Class’ area the place you merely have to write highlighted-menu in the sector.
Next, click on the ‘Save’ button on the prime of the web page to retailer your adjustments.
After that, you will want to add a small little bit of CSS to your theme for the spotlight impact. You can both fix the missing Theme Customizer, or you need to use a code snippet plugin to add CSS code.
How to Add CSS Snippets Using WPCode
For including CSS in WordPress, we suggest utilizing WPCode as a result of it’s the best approach to add any customized code to WordPress.
First you want to set up and activate the free WPCode plugin. For extra directions, take a look at our information on how to install a WordPress plugin.
Upon activation, navigate to Code Snippets » Add Snippet out of your WordPress admin panel. Now click on on the ‘Add New’ button.
This will take you to the ‘Add Snippet’ web page.
Here, hover your mouse over the ‘Add Your Custom Code (New Snippet)’ possibility and easily click on on the ‘Use Snippet’ button beneath it.
Now that you just’re on the ‘Create Custom Snippet’ web page, begin by selecting a title and a ‘Code Type’ on your CSS snippet.
You can select any title you want.
Next, merely click on the dropdown menu beside the ‘Code Type’ possibility on the best after which select the ‘Universal Snippet’ possibility.
After that, copy/paste the next CSS code into the ‘Code Preview’.
<fashion sort="text/css">
/* Highlighted menu */
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
</fashion>
Be positive to embrace the fashion tags, as you see on Lines 1 and 10 beneath.
After pasting the code, go to the ‘Insertion’ part by scrolling down.
Here merely select the ‘Auto Insert’ mode in order that the code could be robotically executed in your complete web site.
Now, go to the highest of the web page and toggle the change from ‘Inactive’ to ‘Active’.
Then merely click on the ‘Save Snippet’ button.
You have now efficiently highlighted a menu merchandise in WordPress utilizing a full web site editor.
This is how your menu merchandise will take care of you add the CSS code.
How to Access the Theme Customizer Using a Block Theme
If you need to use the Theme Customizer and use an FSE theme, then merely copy and paste the URL beneath into your browser. Make positive to exchange ‘instance.com’ with your individual web site’s area title.
https://instance.com/wp-admin/customise.php
Here you merely have to click on the ‘Additional CSS’ tab.
Now, broaden the ‘Additional CSS’ area, after which simply copy/paste the next code snippet.
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
After that, merely click on the ‘Publish’ button on the prime.
That’s all it takes to spotlight a menu merchandise.
It ought to look one thing like this in your web site when completed:
Method 2. Highlighting a Menu Item Using Theme Customizer
If you’re utilizing a non-block-enabled theme, then you definitely’ll in all probability have a theme customizer enabled by default. Highlighting a menu merchandise in a theme customizer is a pretty easy course of.
First, merely go to Appearance » Customize in your WordPress dashboard to launch the theme customizer. Once the theme customizer opens up, merely click on on the ‘ Menus’ tab.
Once you’re in the ‘Menus’ part, merely click on on the gear icon on the prime proper to show superior properties.
Now, merely test the ‘CSS Classes’ field.
After that, scroll down to the ‘Menus’ part.
If you might have a number of menus in your web site, merely click on on the menu whose menu gadgets you need to spotlight.
This will open up a new tab the place you may choose the menu merchandise that you really want to spotlight. It may very well be ‘Get Started’ like in our instance, or it may be your contact form page or the hyperlink to your online store.
Simply click on on the menu merchandise of your selection which is able to broaden it to show some choices. Click into the ‘CSS Classes’ area.
All you might have to do is write 'highlighted-menu' in the sector. You can add this CSS Class to a number of menu gadgets, and they’ll all be highlighted.
Next, merely go to the ‘Additional CSS’ tab in the theme customizer.
Now, merely copy and paste the next CSS code.
/* Highlighted menu */
.highlighted-menu
{
background: #FFB6C1;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Congratulations! You’ve efficiently highlighted a menu merchandise.
Note: Your theme won’t have an ‘Additional CSS’ area in the theme customizer. If not, test theme settings to learn how to add customized CSS. If you may’t discover it, you may want to contact the developer or add it using WPCode.
Customizing Your Menu Item Highlight
Now that you’ve got highlighted the menu merchandise, you may alter the CSS code to customise your menu merchandise the best way you prefer it.
For instance, you may change the background coloration of your menu merchandise.
Simply search for the next code in the CSS snippet, you simply pasted.
background: #FFB6C1
After finding it, you may merely exchange the pink coloration code quantity with the hex code of any coloration of your selection:
background: #7FFFD4;
Above is the hex code for aquamarine.
You can take a look at our information to easily add custom CSS for different concepts on how to customise the highlighted menu merchandise.
After you’re glad together with your decisions, merely click on on the ‘Publish’ button in the theme customizer or ‘Save Snippet’ in WPCode to save your adjustments.
We hope this text helped you find out how to spotlight a menu icon in WordPress. You may additionally need to take a look at our newbie’s information on how to style WordPress navigation menus or our skilled picks of the must-have WordPress plugins to develop your web site.
If you appreciated this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You also can discover us on Twitter and Facebook.
The publish How to Highlight a Menu Item in WordPress first appeared on WPBeginner.
