-
AuthorPosts
-
February 10, 2016 at 3:15 pm #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
February 10, 2016 at 3:27 pm #581175Hi 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,
YigitFebruary 10, 2016 at 3:39 pm #581186That 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 #581198Hi!
Glad you figured it out! Let us know if you have any other questions or issues!
Cheers!
YigitFebruary 10, 2016 at 4:04 pm #581206one 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 #581226Hey!
Please post the link to your website so we can see the issue to provide you an accurate solution.
Cheers!
YigitFebruary 11, 2016 at 3:56 pm #581707February 11, 2016 at 4:16 pm #581726Hi!
Please change the code to following one
.av-main-nav > li:hover a .fa-arrow-down { display: inline-block !important; }
Regards,
YigitFebruary 11, 2016 at 4:28 pm #581739 -
AuthorPosts
- The topic ‘Nav menu font awesome icon beside text on hover’ is closed to new replies.