Need help navbar notification button

Question

i have a problem with my navbar notification button, the button resize the navbar.

here is the code

.badge-notify{
           background:red;
           position:relative;
           top: -20px;
           left: -35px;
        }

      <ul class="nav navbar-nav navbar-right">

        <li><a href="#">

        
          <button class="btn btn-lg btn-link">
            <span class="glyphicon glyphicon-envelope"></span>
          </button>
          <span class="badge badge-notify">3</span>
        

        </a></li>

i dont know if a css problem or what, the button creates a blank space on navbar.

posibily the problem is

This might help - http://stackoverflow.com/questions/22735740/how-to-add-badge-on-top-of-font-awesome-symbol/22736017#22736017 — Paulie_D, Aug 08 '16 at 15:20

score 0 · Accepted Answer · answered Aug 08 '16 at 15:28

Firstly, buttons inside links are invalid HTML so either use just a link or just a button...not both.

You need to put the second span inside the button (or link) and the position it absolutely.

.btn-link {
  position: relative;
}

.badge-notify {
  background: red;
  position: absolute !important;
  top: -15px; /* adjust as required*/
  right: 5px; /* adjust as required*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav navbar-nav navbar-center">
  <li>
    <button class="btn btn-lg btn-link">
      <span class="glyphicon glyphicon-envelope"></span>
      <span class="badge badge-notify">3</span>
    </button>
  </li>
</ul>

Need help navbar notification button

1 Answers1