Docs

[omkar13]

Hi,
I am trying to add a small badge on the right corner of my navbar. how do i achieve that?
The badge size is 45×45 px.
Thanks in advance!

[Thai]

Hi There,

#1] Please add the following code under Customizer > Custom > Global Javascript:

jQuery('.x-navbar-inner .x-container').append('<img class="my-img" src="https://placeholdit.imgix.net/~text?w=45&h=45" />');

#2] Please add the following CSS under Customizer > Custom > Global CSS:

img.my-img {
    float: right;
    margin-top: -35px;
}

Hope it helps 🙂

[omkar13]

Thanks a lot ..that did the work! But the badge is showing before/leftside of menu items. How to fix it on right corner of the menu?

[Lely]

Hi There,

Update above CSS to this:

.x-nav-wrap.desktop {
    margin-right: 100px;
}
img.my-img {
    position: absolute;
    right: 0;
    top: 21px;
}

Hope this helps.

[omkar13]

Thanks a ton! That did the fix 🙂

[Joao]

Glad to hear it,

Cheers

[Author]

Posts