search

CreativeBulma / bulma-badge

Bulma extension to display a badge attached to any kind of element, in different position.
MIT License
46 stars 13 forks source link

Add support for navbar #13

Open dannysmc95 opened 2 years ago

dannysmc95 commented 2 years ago

I am using this with navbar-link inside of the header, and it currently does not work very well, even though position relative is applied to it.

I have added the below to fix the issue, although I am sure there is a better way to do this.

    &.is-left,
    &.is-right,
    &.is-top,
    &.is-top-left,
    &.is-top-right,
    &.is-bottom,
    &.is-bottom-left,
    &.is-bottom-right
        &.is-nav
            transform: translate(-5px, 10px)

Using it like so:

<div class="navbar-item has-dropdown is-hoverable is-icon">
    <a class="navbar-link">
        <span class="badge is-nav is-top-right" />
        <i class="fas fa-code"></i>
    </a>
</div>