- This topic has 9 replies, 3 voices, and was last updated 2 years, 11 months ago by
.
Viewing 10 posts - 1 through 10 (of 10 total)
-
Posts
-
I would like to have exact same menu drop-down animation and arrow on right on hover for my website in desktop mode.
any help will be appreciated.
Customer Support
Hi Paul,
Can you try this CSS in your media query?
.main-navigation ul ul { float: none; height: auto; width: 0; left: -50px; } .main-navigation:not(.toggled) ul li.sfHover>ul, .main-navigation:not(.toggled) ul li:hover>ul { width: 240px; transition: all 0.5s ease; }thanks, that’s working fine, now how can I add a right arrow on each drop-down item on hover same as the above website?
What arrow? I’m not seeing one.
Can you take a screenshot of what you are referring to?
This arrow will appear on hover of the particular item.
Oh I see, do you also have the font awesome plugin installed?
not yet, can you please guide me on that?
Customer Support
Hi there,
try adding this CSS:
.main-navigation .main-nav ul ul li a:after { content: '→'; display: inline-block; margin-left: 10px; opacity: 0; transform: translateX(-100%); } .main-navigation .main-nav ul ul li:hover a:after { opacity: 1; transform: translateX(0); transition: all 0.2s ease; }That was easy, thank you.
Glad to be of help!
Viewing 10 posts - 1 through 10 (of 10 total)
- You must be logged in to reply to this topic.
