Icon with badge (count new messages) shown on non-absolute positions

Question

I am using UIkit (https://getuikit.com) on my HTML-app.

Now I'd like to have an icon that shows a badge with a number of new messages.

This icon works fine on my Laptop, but its not shown on the correct position, if I am using the off canvas.

I created a codepen to demonstrate this:

https://codepen.io/spqrinc/pen/RvaZMJ

This is my css for the badge:

.tpl-badge-icon {
  position: absolute;
  top: -50%;
  right: 0%;
}

Click "Click me for Off-Canvas" to toggle the off canvas element.

Answer 1

It's because your .bar-bottom has a different width with sidebar (width is 270px if you inspect) and affected to li width because it's using percentage. You can fix it by either changing .box-bottom width from 240px to 270px or add this class to manipulate sidebar li width :

.uk-subnav.uk-flex.uk-flex-center.uk-child-width-1-5.uk-grid li 
{
  width: 52px;
}