How to add notification count in notification menu automatically

I want to show notification count in notification tab when receive new notifications. like in this picture. please guide me. If you know the html and css code please assist. thank you all. Good day to you.

enter image description here

If I add this code

<span class="badge" style="background-color: #f0ad4e">1</span></a></li> 

after the navbar it appeaser. but it display every time with or without new notification. is there anyway to fix this?

here is the code

<li  class="active" ><a href="/notification"> Notification <span class="badge" style="background-color: #f0ad4e">1</span></a></li> 

badge css

    .nav-bottom .nav .dropdown li a .badge {         position: absolute;         right: 8px;         top: 13px;         padding: 3px 7px;         font-size: 10px;     } 
Add Comment
1 Answer(s)

I don’t know how you’re choosing to update the notification count, so I’ve just provided a very basic way for you to update notifications. You can do something with a simple JavaScript DOM script where you can trigger the notificationCounter() function. I’ve updated your HTML code as well (see below). Be sure to include it into .js file and load it in the footer of your HTML document.

Javascript:

function notificationCounter() {     counter += 1;     document.getElementById("NotificationBadge").innerHTML = counter; }  const counter = 0; 

HTML:

... <li  class="active" ><a href="/notification"> Notification <span id="NotificationBadge" class="badge" style="background-color: #f0ad4e">1</span></a></li> ... 

CSS: leave it as is.

Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.