Materialize CSS Notification Count Does Not Show Count Numbers

Question

I am using Materialize CSS for one of my projects. I am trying to show the notification count on an icon. Here is my code:

<a class="dropdown-trigger" href="#!" data-activates="notification"> <i class="material-icons white-text ">notifications <small class="notification-badge">5</small></i></a>

CSS style

.notification-badge {
    position: relative;
    right: 5px;
    top: -20px;
    color: #941e1e;
    background-color: #f5f1f2;
    margin: 0 -.8em;
    border-radius: 50%;
    padding: 4px 5px;
}

Here is the output I get. Everything is fine except notification count (5) not showing.

I tried method by davecar21 and changed CSS to below:

.notification-badge {
    position: relative;
    right: -20px;
    top: -80px;
    color: #941e1e;
    background-color: #fff;
    margin: 0 -.8em;
    border-radius: 50%;
    padding: 5px 10px;
}

But now the issue is that dropdown notification list has a space. Check below image. How to solve this?

Here is my nav code.

<div class="navbar-fixed">
    <nav class="orange darken-3">

    <div class="nav-wrapper container">

      <a href="/" class="brand-logo">KnowYourGST</a>
      <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="/blog/">Articles</a></li>
        <li><a href="/qa/">Q&A</a></li>
        <li><a href="/invoice/">Invoicing</a></li>
        <li><a class="dropdown-trigger" href="#!" data-activates="dropdown1">Acts and Law<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="/search/"><i class="material-icons">search</i></a></li>

        <li><a class="dropdown-trigger" href="#!" data-activates="notification"> <i class="material-icons grey-text ">notifications</i><small class="notification-badge">5</small> </a></li>
        <li><a class="dropdown-trigger" href="#!" data-activates="profile">Knowyourgst<i class="material-icons right">arrow_drop_down</i></a></li>

      </ul>
      <ul class="side-nav" id="mobile-demo">
        <li><a href="/blog/">Articles</a></li>
        <li><a href="/qa/">Q&A</a></li>
        <li><a href="/invoice/">Invoicing</a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Acts and Law<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a href="/search/"><i class="material-icons">search</i></a></li>

        <li><a class="dropdown-trigger" href="#!" data-target="notification">Notification<i class="material-icons right">arrow_drop_down</i></a></li>
        <li><a class="dropdown-trigger" href="#!" data-target="profile">Knowyourgst<i class="material-icons right">arrow_drop_down</i></a></li>

      </ul>
    </div>

  </nav>
  </div>

Answer 1

To solve that issue don't enclose your .notification-badge to .material-icons because .notification-badge will inherit the .white-text color.

<a class="dropdown-trigger" href="#!" data-activates="notification">
  <i class="material-icons white-text ">notifications</i>
  <small class="notification-badge">5</small>
</a>

Then add some padding to achieve that badge circle

.notification-badge {
    position: relative;
    right: 5px;
    top: -20px;
    color: #941e1e;
    background-color: #f5f1f2;
    margin: 0 -.8em;
    border-radius: 50%;
    padding: 5px 10px;
}

---

But now the issue is that dropdown notification list has a space.

The reason why this issue is occurs is that you are using position:relative to the notification-badge this means that it is still occupying space that where it is originated.

What you need to do is add class notif to the notification and set its position to absolute;

.notif{
  position: absolute;
}

.

<i class="material-icons grey-text notif">notifications</i>

And then set the style of .notification-badge

.notification-badge {
  position:relative;
  padding:5px 9px;
  background-color: #fff;
  color: #941e1e;
  bottom: 15px;
  left: 15px;
  border-radius: 50%;
}

Hope this helps.