Topic: Navbar with counters
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
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;
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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