Add text bubble above menu link

Hi kilimats!

Please go to Appearance > Menus and click “Screen options” on the top right corner and check CSS classes and then edit your menu item and give it a custom CSS class and then add following code to Quick CSS in Enfold theme options under General Styling tab

.your-custom-class > a > span.avia-menu-text:after {
    content: "4";
    font-size: 9px;
    color: #FFF;
    background: #42A0BD;
    line-height: 17px;
    width: 17px;
    display: inline-block;
    text-align: center;
    border-radius: 100px;
    position: relative;
    top: -9px;
    left: 2px;
}

Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

Cheers!
Yigit

Hey!

Please post the link to your website where we can see the issues.

Cheers!
Yigit

Hey!

Please change your code to following one

.live > a > span.avia-menu-text:after {
    content: "Live";
    font-size: 12px;
    color: #FFF;
    background: #77c84c;
    line-height: 20px;
    width: 36px;
    display: inline-block;
    text-align: center;
    border-radius: 0px;
    position: relative;
    top: -18px;
    margin-left: -50px;
}
#socket .live > a > span.avia-menu-text:after {
    margin-top: -10px;
}
#socket .sub_menu_socket div {
    overflow: visible;
}

Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

Cheers!
Yigit

Hi,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

.live > a:hover > span.avia-menu-text:before {
    color: white;
    background: red;
}

Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field.

Best regards,
Yigit

Hey!

Glad we could help! Let us know if you have any other questions :)

Best regards,
Yigit