0

I have a notification badge counter that is centered in specific device width and it changes its position when the device width goes bigger. I want to notification counter to be always in the center. I am using css and my html/css code is the following:

.nav-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  font-family: Calibri, Trebuchet, Arial, sans serif;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  display: flex;
  overflow-x: auto;
  height: 56px;
  z-index: 9999;
}

.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 50px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-weight: bold;
  color: #4D5656;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease-in-out;
  font-family: Calibri, Trebuchet, Arial, sans serif;
  padding-top: 10px;
}

.nav__link:hover {
  background-color: #eeeeee;
}

.nav__link--active {
  background-color: #84B213;
  color: #fff;
}

.nav__icon {
  font-size: 18px;
}

.item-count-contain {
  top: 3px;
  right: 44px;
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #dc3545;
  color: #ffffff;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
<nav class="nav-menu ">
  <a href="#" class="nav__link ">
    <i class="material-icons nav__icon">home</i>
    <span class="nav__text">Home</span>
  </a>

  <a href="#" class="nav__link ">
    <i class="material-icons nav__icon">notifications_active</i>
    <div class="item-count-contain"> 0 </div>
    <span class="nav__text">Notifications</span>
  </a>
  <a href="#" class="nav__link nav__link--active">
    <i class="material-icons nav__icon">camera_enhance</i>
    <span class="nav__text">Add Product</span>
  </a>
  <a href="#" class="nav__link ">
    <i class="material-icons nav__icon">shopping_cart</i>
    <div class="item-count-contain"> 0 </div>
    <span class="nav__text">Cart</span>
  </a>
  <a href="#" class="nav__link ">
    <i class="material-icons nav__icon">manage_accounts</i>
    <span class="nav__text">Account</span>
  </a>

</nav>

Here is how it looks like:

enter image description here

NB: The navbar is fixed at the bottom of the page for the mobile purpose.

Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
Richard Branson
  • 151
  • 8

1 Answers1

1

You are using right: 44px on item-count-contain which is a fixed value so it will obviously be not responsive. Add left: 50% and transform: translateX(-50%) to move it to center horizontally.

In case you want to centralize it vertically as well then apply top: 50% and transform: translateY(-50%)

Bot centralization can be combined:

top: 50%;
left: 50%;
transform: translate(-50%,-50%);


.nav-menu {
  position: fixed;
  bottom: 0;
  width: 100%;
  font-family: Calibri, Trebuchet, Arial, sans serif;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  background-color: #ffffff;
  display: flex;
  overflow-x: auto;
  height: 56px;
  z-index: 9999;
}

.nav__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
  min-width: 50px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 12px;
  font-weight: bold;
  color: #4D5656;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease-in-out;
  font-family: Calibri, Trebuchet, Arial, sans serif;
  padding-top: 10px;
}

.nav__link:hover {
  background-color: #eeeeee;
}

.nav__link--active {
  background-color: #84B213;
  color: #fff;
}

.nav__icon {
  font-size: 18px;
}

.item-count-contain {
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #dc3545;
  color: #ffffff;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
<nav class="nav-menu ">
  <a href="#" class="nav__link ">
    <i class="material-icons nav__icon">home</i>
    <span class="nav__text">Home</span>
  </a>

  <a href="#" class="nav__link ">
    <i class="material-icons nav__icon">notifications_active</i>
    <div class="item-count-contain"> 0 </div>
    <span class="nav__text">Notifications</span>
  </a>
  <a href="#" class="nav__link nav__link--active">
    <i class="material-icons nav__icon">camera_enhance</i>
    <span class="nav__text">Add Product</span>
  </a>
  <a href="#" class="nav__link ">
    <i class="material-icons nav__icon">shopping_cart</i>
    <div class="item-count-contain"> 0 </div>
    <span class="nav__text">Cart</span>
  </a>
  <a href="#" class="nav__link ">
    <i class="material-icons nav__icon">manage_accounts</i>
    <span class="nav__text">Account</span>
  </a>

</nav>
Metabolic
  • 2,808
  • 3
  • 27
  • 41