Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • February 10, 2016 at 3:15 pm #581170
    Isakos-Soft

    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

    February 10, 2016 at 3:27 pm #581175
    Yigit

    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

    February 10, 2016 at 3:39 pm #581186
    Isakos-Soft

    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.
    February 10, 2016 at 3:52 pm #581198
    Yigit

    Hi!

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

    Cheers!
    Yigit

    February 10, 2016 at 4:04 pm #581206
    Isakos-Soft

    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

    February 10, 2016 at 4:51 pm #581226
    Yigit

    Hey!

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

    Cheers!
    Yigit

    February 11, 2016 at 3:56 pm #581707
    Isakos-Soft

    I post you the site.

    Thank you

    • This reply was modified 8 years, 8 months ago by Isakos-Soft.
    February 11, 2016 at 4:16 pm #581726
    Yigit

    Hi!

    Please change the code to following one 

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

    Regards,
    Yigit

    February 11, 2016 at 4:28 pm #581739
    Isakos-Soft

    It worked.

    Thank you very much.

    • This reply was modified 8 years, 8 months ago by Isakos-Soft.
  • Author
    Posts
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.