Navbar with counters


Topic: Navbar with counters

fmaeseele pro asked 6 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


Bartłomiej Malanowski staff pro premium answered 6 years ago

Try this:

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

fmaeseele pro answered 6 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 pro premium commented 6 years ago

So is the problem resolved?


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
  • User: 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