How to Add Own Personal Menu Label in Flatsome Powered Website

Adding a label to the menu item is effective for online stores. The menu labels allow your customer to get acknowledged quickly about your special items. A custom menu label is a smart way to attract your customer to the highlighted products.

We will guide you step-by-step on how you can create and add custom menu labels to the menu items. You will be able to create colorful and eye-catching menu labels for your customers after finishing this tutorial. You can also know how to create a website mega menu in the Flatsome theme.

How to Add a Custom Menu Label in Flatsome Theme Step-by-Step

Step 1:

From the admin top bar, hover on ‘Flatsome’ and click on ‘Advanced.’

flatsome menu labels

Step 2:

On the ‘Flatsome Advanced Options’ page, click on the ‘Custom CSS’ tab. Most of the top mobile-friendly WordPress themes have custom CSS fields.

free wordpress woocommerce theme

Step 3:

Now we need to add a custom CSS code to the ‘All Screen’ section on the ‘Custom CSS’ tab. You can also paste this CSS code into your child theme’s ‘style.css ‘ file. If you don’t know how to create a child theme WordPress, see another tutorial.

********************************************************************************************

/**

 * Code goes in style.css of your child theme or Advanced > Custom CSS

 */

.label-purple.menu-item > a:after {

content: 'Purple'; /* Change text */

display: inline-block;

font-size: 9px;

line-height: 9px;

text-transform: uppercase;

letter-spacing: -0.1px;

margin-left: 4px;

background-color: #572fbd; /* Change color */

font-weight: bolder;

border-radius: 2px;

color: #fff;

padding: 2px 3px 3px;

position: relative;

top: -2px;

}

**********************************************************************************************

You need to customize the code in two places according to your need. Inside the code, write the name of your label in the ‘content’ value; replace ‘Purple’ inside the ‘’(apostrophes) with the name of your choice. Similarly, replace the ‘background-color’ value with the Hexa color code of your choice.

flatsome menu labels

Step 4:

Paste the given code inside the ‘All Screen’ custom code field.

best free woocommerce theme

Step 5:

Click on ‘Save All Changes’ to save our custom CSS code in the Advanced Options.

flatsome menu labels

Step 6:

Now on the dashboard, hover on the ‘Appearance’ option and then click on ‘Menus.’ Creating and editing the menu is pretty much the same in all the best premium WordPress themes to build an awesome eStore.

free wordpress woocommerce theme

Step 7:

Click on ‘Screen Options’ in the top-left corner.

flatsome menu labels

Step 8:

Check the box ‘CSS Classes’ to enable custom CSS for menu items. Then click ‘Save Menu’ to save menu settings.

woo commerce free wp theme

Step 9:

Now click on the menu item you want to show the custom label for. As an example, we will add a custom label to the menu item ‘Winter,’ as shown in the picture. If you want to add custom icons to WordPress you can easily learn with our tutorials.

flatsome menu labels

Step 10:

Now, in the CSS Classes field inside the ‘Winter’ menu item, write the class name of the custom label we created before. For us, the custom label CSS name is ‘label-purple’

best woo commerce theme wp

flatsome menu labels

Step 11:

Write the custom CSS class name as shown in the picture and click ‘Save Menu’ to save your settings.

wordpress woocommerce theme

 

Step 12:

Now visit your website and hover on the menu. You will see that our custom label ‘Featured’ is displayed perfectly beside the menu item ‘Winter.’ If you are dealing with products you can also learn how to add featured products in the WooCommerce theme.

flatsome menu labels

 

 

Conclusion

This is how you can create and add beautiful, eye-catching custom labels to your menu item in the Flatsome theme. We intended to be as detailed as possible to show you how you can easily add custom menu labels without much hassle.

We hope this tutorial helps you as you need it. Stay tuned with WPCred for more tutorials like this. You can also check out the tutorial on how to create a scroll-to link in the Flatsome theme.


Subscribe To Our Newsletter!
Hi, I’m Mohamed. I share delicious recipes that I have cooked and loved. I’ve been food blogging for over 10 years and have a Diploma in Nutrition. You will find many healthy recipes as well as my favourite comfort food on the blog because I believe in a balanced diet.

Related Posts

Fintech’s biggest hits and misses of 2023

As 2023 comes to a close, we’re here to look back at the biggest fintech stories of the year. Silicon Valley Bank’s implosion felt like a fintech…

It’s critical to regulate AI within the multi-trillion-dollar API economy

Alex Akimov Contributor With two decades of tech leadership experience, Alex Akimov, former head of API at Adyen, now revolutionizes embedded finance at Monite by building best-in-class…

Arduino exploring India manufacturing to limit counterfeit sales

Arduino is considering manufacturing in India. The startup, best known for its open source microcontroller boards, hopes to restrict the rise of counterfeit boards and cater to…

EU’s provisional deal on gig worker rights fails to get enough backing from Member States

Not so fast on that Christmas present for precarious gig workers in the EU: A political deal announced mid month, which aims to bolster platform workers rights…

Top robotics names discuss humanoids, generative AI and more

Last month, I took an extended break. In a bid to keep my robotics newsletter Actuator (subscribe here) up and running, however, I reached out to some…

Pornhub owner pays US government $1.8M to resolve sex trafficking probe

Pornhub’s parent company Aylo Holdings will pay $1.8 million to the U.S. government to resolve a charge of profiting off of sex trafficking. The company, formerly known…