Hello everyone!
Metode ini penting digunakan jika website kamu memiliki sebuah layanan baru yang belum pernah ada sebelumnya, dengan menambahkan badge info pada menu. Ini akan menambahkan nilai estetika dan fungsional.
Dukung EstehC.
Ketika kamu sudah masuk ke dashboard, Appearance > Customize > Custom CSS. Dan taruh kode CSS berikut,
CSS Code 1
.menu-badge {
font-size: 9px;
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 13px;
color: #ffffff;
background-color: #FF0000;
padding: 3px 4px;
border-radius: 3px;
line-height: 1.5em;
}
Jika ingin memberikan animasi pada bagdes. Tambahkan kode CSS berikut di bawah kode .menu-badge di atas,
CSS Code 2
.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}
}
Lalu, masuk ke Appearance > Menus > Pilih menu yang akan diberikan badges > Di belakang judul menu berikan kode CSS berikut,
HTML Code
<span class="menu-badge badge-bounce">NEW</span>