How To Creat Menu Badges
24 October 2021
How To Add Menu Notification Badges
Hi , I will show you how to creat menu badges on wordpress, It’s Very simply,
Go to wordpress dashboard and click on customizion then clicl on custom css
Steps to Add Menu Notification Badges in WordPress
1.Add the custom CSS code
Go to wordpress dashboard and click on customizion then click on custom css and copy below code
.menu-badge {
font-size: 9px;
position: relative;
bottom: 94px;
width: 10%;
margin: 10px;
color: #ffffff;
background-color: #4caf50;
padding: 1px 4px;
border-radius: 3px;
float: left;
}
.menu-badge2 {
font-size: 9px;
position: relative;
bottom: 94px;
width: 27%;
margin: 10px;
color: #ffffff;
background-color: #FF0000;
padding: 1px 4px;
border-radius: 3px;
float: left;
}
2. Add The Badge To the Menu Element
To appear badge in menu go to Appearance -> Menu and copy below cod on Navigation Label every item you want.
<span class="menu-badge2 badge-bounce">(پایان ثبت نام)</span>
3. Add animation to Notification badge
to add bouncing animate on your badge copy below code
.badge-bounce {
animation: bouncing .8s cubic-bezier(0.1,0.05,0.05,1) 0s infinite alternate both;
}
@keyframes bouncing{
0%{top:-6px}
100%{top:-10px}
}
Posted in Toturial