Kacy-Jung Posted June 20 Share Posted June 20 As the title, I want to add shadows underneath my navigation and the sub-item underneath my navigation separately when hovering separately. I found the code but it's making both Work and LanguageLand have shadows at the same time while hovering (as attached). But I want only Work has a shadow when hovering while only LanguageLand has a shadow when hovering. Can anyone help me with this? Thank you so much! div.header-nav-item:hover a { text-shadow: 3px 3px 5px #EFF193; } Many thanks Link to comment
Kacy-Jung Posted June 21 Author Share Posted June 21 Here you are!!! kacy-jung.com I also upload the screenshot. I am hoping when I hover over Work, only Work is dropping shadow but not both Work and Case Study 1. When I hover over Case Study 1, the shadow underneath Work would disappear. Thank you soooo much!!! Link to comment
Kacy-Jung Posted June 21 Author Share Posted June 21 (edited) It is still showing two shadow (black and yellow) so weird. I deleted my original code. I don't know why the yellow is still there. But the black is doing what we wish it does! And I also want to assign color and size #3px 3px 5px #EFF193 to my shadow I attached screenshot here. Is there way I can do that? This is my origina code! div.header-nav-item:hover a { text-shadow: 3px 3px 5px #EFF193; } Many thanks! Edited June 21 by Kacy-Jung Link to comment
tuanphan Posted June 23 Share Posted June 23 On 6/22/2024 at 12:11 AM, Kacy-Jung said: It is still showing two shadow (black and yellow) so weird. I deleted my original code. I don't know why the yellow is still there. But the black is doing what we wish it does! And I also want to assign color and size #3px 3px 5px #EFF193 to my shadow I attached screenshot here. Is there way I can do that? This is my origina code! div.header-nav-item:hover a { text-shadow: 3px 3px 5px #EFF193; } Many thanks! Use this new CSS code div.header-nav-item:hover a { text-shadow: unset !important; } div.header-nav-item > a:hover { text-shadow: 0px 12px 8px rgba(0,0,0,0.6) !important; } .header-nav-folder-content > .header-nav-folder-item > a:hover { text-shadow: 0px 12px 8px rgba(0,0,0,0.6) !important; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Solution Kacy-Jung Posted June 23 Author Solution Share Posted June 23 Thank you! It's working now. I modify it to below to get the right shadow and color! Many thanks! div.header-nav-item:hover a { text-shadow: unset !important; } div.header-nav-item > a:hover { text-shadow: 3px 3px 5px #EFF193 !important; } .header-nav-folder-content > .header-nav-folder-item > a:hover { text-shadow: 3px 3px 5px #EFF193 !important; } Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment