Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #664048

    How do i achieve this with enfold?

    #664050

    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

    #664108

    Nice almost perfect, how do i move the under line centered like before on the text?

    #664281

    the offset appears to be caused by the whitespace between menu, how do i remove the added space?

    #664283

    other issue is with the footer menu, same alignement issue

    #664890

    Hey!

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

    Cheers!
    Yigit

    #664893

    here thx

    #664898

    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

    #665507

    That worked beautifully ! one last question, can i add a mouse hover background/text color too ?

    #665686

    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

    #665849

    flawless ! you rock !

    #665856

    Hey!

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

    Best regards,
    Yigit

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Add text bubble above menu link’ is closed to new replies.