How to make an animated item in a primary menu in Astra
Code that needs to be added in a Theme Customizer's Additional CSS section:
.menu-badge { font-size: .5em; margin-left: 2px; position: relative; top: -10px; margin-bottom: 13px; color: #ffffff; background-color: #cd5c5c; padding: 1px 3px; border-radius: 3px; line-height: 1.5em; } .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} }
In a menu item add:
Two <span class="menu-badge badge-bounce">Words</span>
"Words" will be bouncing.