Kacy-Jung Posted June 23 Share Posted June 23 Hi all Is there any way that I can change the underline to a rounded box (gradient color from #E2E558 to #ED8261) to make my navigation looks like a button to show the page state + drop shadow when hover over? Many thanks! Reference image attached. Many thanks! Link to comment
Beyondspace Posted June 24 Share Posted June 24 15 hours ago, Kacy-Jung said: Hi all Is there any way that I can change the underline to a rounded box (gradient color from #E2E558 to #ED8261) to make my navigation looks like a button to show the page state + drop shadow when hover over? Many thanks! Reference image attached. Many thanks! Can you share your URL so I can check it? BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox, video lightbox and much more) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace (+100 Spark plugin customisations) 🥳 Freemium Squarespace Widget Templates (+1000 Elfsight Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Solution tuanphan Posted June 29 Solution Share Posted June 29 On 6/27/2024 at 3:18 AM, Kacy-Jung said: It's kacy-jung.com! Thank you! You can use this to Custom CSS div.header-nav-item--active>a { background-image: linear-gradient(to right, #E2E558, #ed8261) !important; background-size: auto !important; padding-left: 5px !important; padding-right: 5px !important; border-radius: 10px !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
Kacy-Jung Posted July 3 Author Share Posted July 3 It works! You are genius! Thank you!! Link to comment
Kacy-Jung Posted July 3 Author Share Posted July 3 I just noticed that it looks like its cutted off the bottom... kacy-jung.com Is there any way to resolve it?? Many thanks!!! Link to comment
tuanphan Posted July 5 Share Posted July 5 On 7/3/2024 at 10:52 AM, Kacy-Jung said: I just noticed that it looks like its cutted off the bottom... kacy-jung.com Is there any way to resolve it?? Many thanks!!! You can use this new code div.header-nav-item--active>a { background-image: linear-gradient(to right, #E2E558, #ed8261) !important; background-size: auto !Important; padding-left: 5px !important; padding-right: 5px !important; border-radius: 10px !important; background-position: center !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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment