Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #581170

    Hello,

    I want on nav menu to set a font awesome icon (e.g. <i class=”fa fa-arrow-down”></i>) beside text page or custom link only on hover.

    How to do that in enfold main nav menu ?

    I want to show that only on hover. This way in Css doesn’t work

    .fa-arrow-down { … }

    .fa-arrow-down:hover { … }

    because use that class .fa-arrow-down:before { … }

    I read that use a div element before awesome <i> class e.g. div.avia-menu:hover .fa-arrow-down { … }

    Where is the right class can i use on hover ?

    Thank you

    #581175

    Hi Isakos-Soft!

    If you have not installed FontAwesome yet, you can refer to my post here – https://kriesi.at/support/topic/importing-icon-from-font-awesome/#post-414749

    Then add your icon in Appearance > Menus and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .av-main-nav > li > a:hover .fa-arrow-down { display: block !important; }
    .av-main-nav > li > a .fa-arrow-down { display: none; }

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

    Regards,
    Yigit

    #581186

    That work but show arrow above the text. I want to show beside the text.

    Ok. I find the solution to set beside text the font icon, .av-main-nav > li > a:hover … { display: inline-block

    .av-main-nav > li > a:hover .fa-arrow-down { display: inline-block !important; }
    .av-main-nav > li > a .fa-arrow-down { display: none; }

    Thank you

    • This reply was modified 8 years, 9 months ago by Isakos-Soft.
    #581198

    Hi!

    Glad you figured it out! Let us know if you have any other questions or issues!

    Cheers!
    Yigit

    #581206

    one other question.

    When the cursor move to submenu the font icon hide. To show the font icon when the cursor is in submenu, i should use javascript?

    Thank you

    #581226

    Hey!

    Please post the link to your website so we can see the issue to provide you an accurate solution.

    Cheers!
    Yigit

    #581707

    I post you the site.

    Thank you

    • This reply was modified 8 years, 8 months ago by Isakos-Soft.
    #581726

    Hi!

    Please change the code to following one

    .av-main-nav > li:hover a .fa-arrow-down {
        display: inline-block !important;
    }

    Regards,
    Yigit

    #581739

    It worked.

    Thank you very much.

    • This reply was modified 8 years, 8 months ago by Isakos-Soft.
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Nav menu font awesome icon beside text on hover’ is closed to new replies.