Topic: Navbar with counters

fmaeseele pro asked 5 years ago


Hi, Using the span counter class to display notifications number in a navbar wrongly place the counter. Instead of being on the right side, it is placed on the left of the 'a' element.

Snippet with counters in navbar

Could you please let me know what is wrong with the code ? Appart from the counter, the code is taken from the navbars samples page.

Regards, François


fmaeseele pro answered 5 years ago


Hi, Thanks for your help but it didn't work. Here is what I had to do in order for it working with IE/Edge/Firefox/Chrome:

nav .navbar-nav .counter {
position: absolute !important;
padding: 0 !important;
top: 0 !important;
right: 0 !important;
color: #ffffff;
background-color: #fe1212;
width: 18px !important;
height: 18px !important;
border-radius: 50% !important;
-webkit-border-radius: 50% !important;
line-height: 18px !important;
font-size: 10px !important;
text-align: center !important;
cursor: pointer;
margin-left: 0 !important;
margin-top: 0 !important;
left: 20px !important; 
}

Bartłomiej Malanowski staff commented 5 years ago

So is the problem resolved?



Try this:

.navbar .counter {
  left: 10px;
  margin-left: unset;
}


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.4
  • Device: PC
  • Browser: Chrome/Edge/Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes