kaydotjpg Posted November 21, 2023 Share Posted November 21, 2023 https://eagle-sepia-5laj.squarespace.com/ password: 12345 Hi! I would like: when the user hovers over nav links in the header (the nav links you see are just normal nav links with a pill shape around it - not to be confused with actual "buttons"), the pill shape fills with a color. I would preferably like each nav link pill shape to be filled with a different color (design work be filled with #745C8E, fine art be filled with #2D6945, contact be filled with #C8553D - all with black font) Thank you! Link to comment
melody495 Posted November 22, 2023 Share Posted November 22, 2023 Hi @kaydotjpg, your site is private, cannot access. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
kaydotjpg Posted November 25, 2023 Author Share Posted November 25, 2023 oh jeez @melody495 sorry about that! You can now view the site: https://eagle-sepia-5laj.squarespace.com/ password: 12345 Link to comment
tuanphan Posted November 27, 2023 Share Posted November 27, 2023 You can add this code to Website Tools (under Not Linked) > Custom CSS div.header-nav-item:nth-child(1):hover { background-color: #745C8E !important; } div.header-nav-item:nth-child(2):hover { background-color: #2D6945 !important; } div.header-nav-item:nth-child(3):hover { background-color: #C8553D !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
kaydotjpg Posted December 4, 2023 Author Share Posted December 4, 2023 @tuanphan Thank you- this worked perfectly! If I also wanted these colors to stay active while on the page, how would I do that? Thank you 🌀 Link to comment
tuanphan Posted December 6, 2023 Share Posted December 6, 2023 (edited) On 12/4/2023 at 10:03 PM, kaydotjpg said: @tuanphan Thank you- this worked perfectly! If I also wanted these colors to stay active while on the page, how would I do that? Thank you 🌀 Use this new code div.header-nav-item:nth-child(1):hover, div.header-nav-item--active:nth-child(1) { background-color: #745C8E !important; } div.header-nav-item:nth-child(2):hover, div.header-nav-item--active:nth-child(2) { background-color: #2D6945 !important; } div.header-nav-item:nth-child(3):hover, div.header-nav-item--active:nth-child(3) { background-color: #C8553D !important; } How about mobile? Do same or do it on desktop only Edited December 6, 2023 by tuanphan 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment