XDUNICORN

How to make menu notification badge with news sidebar in WordPress

How to make menu notification badge with news sidebar in WordPress

In this tutorial we are going to create a very cool menu notification badge with a news sidebar in WordPress and Elementor, simple and clean to allow your users or visitor to be always up to date with your latest posts. I will add below a custom code that you can use to achieve this same result. So what are you waiting for? Start and create a WordPress Notification Badge with a news sidebar.

Plugins:
Elementor Free: https://bit.ly/elementor-xdu
Elementor PRO: https://bit.ly/elementorpro-xdu

🤓 CSS code:

.menu-badge {
margin-left: 4px;
position: relative;
top: -10px;
margin-bottom: 5px;
color: #ffffff;
background-color: #F93E5E;
padding: 3px 3px;
border-radius: 100%;
}

.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}
}

🤓 HTML code:

<span class="menu-badge badge-bounce"></span>
LinkedIn
Facebook
Twitter

free

Stay always up to date with new tutorials!

Do you want to learn more on web, marketing and design? Sign up and you will receive exclusive content and new tutorials every week.

Full Stack Designer

I was born with a passion for Design and the web, since I was very young this world has always intrigued me by developing a profession that I love and that I want to share.

RELATED ARTICLES