How to Add 'FEATURED,' 'BETA' (additional text) to a Menu Item in WordPress
In this video, you will see how to add extra text like 'BETA' or 'FEATURED' with any of the menus on a WordPress site.
This process is completely custom; you do not need any plugins.
For this, first, open the WordPress dashboard and go to the menu section under the Appearance option.
Expand the menu where you want to add the featured text.
span class="featured-text"*FEATURED*/span
(replace the *(stars) with angled brackets as in the video)
Here the "featured-text" is the class name.
Save the changes and view the website; you will see the featured text has been added to the menu. Now we need to make it look good.
Watch this video to learn how to change the color of a Specific menu item: • How to Change the Color of a Specific Menu... .
Click on the Customize button and select the 'Additional CSS' option; in your theme settings, it can be 'Custom CSS/JS.'
Under Additional CSS, paste the code; I will explain the code line by line.
.featured-text{
vertical-align: super;
background-color: #1f47a4;
border-radius: 4px;
color: white;
font-size: 11px;
padding: 1px 4px;
margin-left: 5px;
}
Let's see how this code works:
1.
The vertical-align: super; aligns the text with the superscript baseline of the parent.
If you want to display the featured text on the same line, you can change the super to the 'middle.'
2.
The background-color property is responsible for the background color of the featured text; you can change this color to your own or use CSS color codes.
3.
The border-radius properly curves the border, so it looks good; you can increase or decrease the amount of curve you need.
If I make this curve 10px, you can see the changes here.
4.
The color property sets the font color for the featured text. If you want to use the same color as the menus, then you can delete this code.
5.
The font-size property sets the size of the featured text font.
6.
The padding properly sets the extra space between the featured text.
Here the first 1px has been used to set the vertical space, and the 4px is for the horizontal space between the text.
7.
Finally, the margin-left sets some gap between the menu and the featured text; you can delete this property if you don't want it.
Subscribe to the channel:
/ @positivegeek
Hostinger web hosting: https://www.hostg.xyz/aff_c?offer_id=...
Bluehost web hosting: https://www.bluehost.com/track/nurjoy...
Rank Math SEO Plugin: https://rankmath.com/pricing/?ref=nur...
Follow and engage on social media:
Facebook: / positivegeekfb
#featured #wordpress #beta #custom #text