NadineS Posted April 17, 2023 Share Posted April 17, 2023 Hey SS Forum friends, I'm still pretty new to CSS, and am trying to add a hover effect to the navigation on this site, but what I've done adds a "bump" effect due to the padding I guess? Any ideas on how to eliminate this? I tried adding the border and padding stuff, but to no avail... :S /* Nav item color */ .header-nav-item a { border-radius: 10px 10px 0px 0px; padding: 2px 10px; transition-duration: 0.4s; } /* Nav item hover color */ .header-nav-item a:hover { background-color: #D5B56E !important; border-radius: 10px 10px 0px 0px; padding: 2px 10px; transition-duration: 0.4s; } Link to comment
Vicks Posted April 18, 2023 Share Posted April 18, 2023 (edited) Btw, in your :hover class, you just need to define the properties which you want to change, You can remove the border and padding from :hover class. However, the bump effect you mentioned might be caused by something else. can you show it? a locked draft website should do. Edited April 18, 2023 by Vicks Link to comment
NadineS Posted April 21, 2023 Author Share Posted April 21, 2023 Thanks @Vicks Here's the live site: https://www.catherinebfogarty.com/ Link to comment
Solution Vicks Posted April 21, 2023 Solution Share Posted April 21, 2023 here is your CSS, you just needed to be more specific when targeting the item. Because of the specificity of CSS, there was another class taking over your padding settings. If you just change the selector, it should work: /* Nav item color */ .header .header-nav-wrapper a { border-radius: 10px 10px 0px 0px; padding: 2px 10px; transition-duration: 0.4s; } /* Nav item hover color */ .header .header-nav-wrapper a:hover { background-color: #D5B56E !important; border-radius: 10px 10px 0px 0px; padding: 2px 10px; transition-duration: 0.4s; } NadineS and tuanphan 2 Link to comment
NadineS Posted May 9, 2023 Author Share Posted May 9, 2023 @Vicks Thank you so much! This worked perfectly. 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