Okay
  Public Ticket #1324188
Notification Count
Closed

Comments

  • mrguy started the conversation

    On the notification count (the number associated with the bell icon)

    <a href="#" data-toggle="dropdown" class="nav-link nav-link-label"><i class="ficon icon-bell4"></i><span class="tag tag-pill tag-default tag-danger tag-default tag-up">5</span></a>

    I am trying to remove the circle and number when there are no notifications. I have tried to remove the classes, " tag-default tag-danger tag-default tag-up"" and add a  space for the number like 

    <a href="#" data-toggle="dropdown" class="nav-link nav-link-label"><i class="ficon icon-bell4"></i><span class="tag tag-pill"> </span></a>

    The problem is the bell icon shifts. I couldn't find anything in the documentation on this. How can I show the bell icon with or without the circle and keep the icon in place?

    Thank you for your support!

  •  30
    Andrew replied

    Hello mrguy,

    Thanks for getting in touch. As you do not want to show notification count you have to write conditional code to not generate span with notification badge.

     <span class="tag tag-pill tag-default tag-danger tag-default tag-up">5</span>


    Above code should only generate when there are notifications.

    Hope that make sense!!

    Cheers~

  • mrguy replied

    Exactly and have tried that. The issue is the bell shifts to the right. You can try it out in dev tools on your own site https://pixinvent.com/bootstrap-admin-template/robust/html/ltr/horizontal-top-icon-menu-template/

    Removing that span shifts the bell to the right.  Please see my original question, "The problem is the bell icon shifts. I couldn't find anything in the documentation on this. How can I show the bell icon with or without the circle and keep the icon in place?"

    In other words, the expected outcome when removing that span is for the icon to stay in place.

    Thank you

  •  30
    Andrew replied

    Hello mrguy,

    Please read our previous reply carefully. We have answered your query.

    Currenty your code reads like this: 

    <a href="#" data-toggle="dropdown" class="nav-link nav-link-label"><i class="ficon icon-bell4"></i><span class="tag tag-pill tag-default tag-danger tag-default tag-up">5</span></a>

    To hide the notification badge your code should read like this :

    <a href="#" data-toggle="dropdown" class="nav-link nav-link-label"><i class="ficon icon-bell4"></i></a>

    Hope that helps!!

    Cheers~

  • mrguy replied

    I did ready your reply. Did you read mine?


    I have done exactly as you said. The issue is the header shifts. I am including a gif that shows what happens when I use your code.

    Attached files:  pxinvent1.gif

  •  30
    Andrew replied

    Hello mrguy,

    Apology for the delay, we were on the festival vacation. We've log this bug to our next update log, It will be fixed in that.

    Meanwhile you can use the following css and override this by adding in assets/css/style.css.

    .tag-up {
        position: absolute;
        top: 8px;
        right: -6px;
    }

    Hope that helps.

    Thanks,

    Andrew