cecilliehanssen Posted November 14, 2022 Share Posted November 14, 2022 (edited) Hi all squarespacers, I have an issue with my top menu bar, it jumps when you hover over it. I have added some custom CSS to create the underlined color effect but I don't know how to solve this jumping thing. https://www.cecilliehanssen.com Thank you. Edited November 14, 2022 by cecilliehanssen missing link Link to comment
Ziggy Posted November 14, 2022 Share Posted November 14, 2022 If you add the underline effect before hover (exactly the same but transparent instead of coral) you won't get the jumping. Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? Link to comment
cecilliehanssen Posted November 15, 2022 Author Share Posted November 15, 2022 Hi @Ziggy Would you mind taking a look at where I go wrong? - I tried the following without luck: .header-nav-list :hover { text-decoration: none; box-shadow: inset 0 -1em 0 rgba(0,0,0,0); color: inherit; padding-left: 3px !important; } .header-nav-list :hover { text-decoration: none; box-shadow: inset 0 -1em 0 rgba(249,130,147,1); color: inherit; padding-left: 3px !important; } Thank you 🙌 Link to comment
Ziggy Posted November 15, 2022 Share Posted November 15, 2022 You currently have two hover states, try removing the hover from the first: .header-nav-list { text-decoration: none; box-shadow: inset 0 -1em 0 rgba(0,0,0,0); color: inherit; padding-left: 3px !important; } .header-nav-list:hover { text-decoration: none; box-shadow: inset 0 -1em 0 rgba(249,130,147,1); color: inherit; padding-left: 3px !important; } Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link) 📈 SEO Space (Referral link) ⬛ SquareWebsites Plugins (Referral link) ✨ Spark Plugin (Referral link) ☕ Did I help? Buy me a coffee? 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