Navbar with counters

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

Add comment

fmaeseele pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

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?

Add comment

Bartłomiej Malanowski staff answered 5 years ago

0 0 Best answer

Try this:

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

Add comment

Write

Create snippet

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

fmaeseele

Pro User 92Support score
7Questions 6Answers 6Snippets