gradinfilm Posted June 24 Posted June 24 I've used other web design services in the past but this is my first time working with Squarespace and I know next to nothing about coding. I made a rough design of how I want my website to look recently, I'm really happy with how it turned out but I'm struggling to make this design come to fruition with the tools Squarespace provides. Currently, the issue I am facing is giving the navigation bar this button-like structure. I aim to have that little gradient bar move up and highlight the white buttons as the user hovers over it. I know this is quite complicated, but I am eager to have this be the final look. Any help would be greatly appreciated.
Lesum Posted June 24 Posted June 24 @gradinfilm Hi! This can be done with custom CSS. Can you share your site URL? If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
gradinfilm Posted June 24 Author Posted June 24 (edited) Hello of course it's graduatesinfilm.org, the password is 123 Edited June 24 by gradinfilm
Lesum Posted June 25 Posted June 25 (edited) @gradinfilm Hi! I've just created this custom CSS based on the screenshot you provided. You may need to adjust the color codes. Add the following code under Website > Pages > Website Tools > Custom CSS. .header-nav-item a { position: relative; padding: 5px 20px 10px 20px !important; background-color: white; color: black; border: none; cursor: pointer; font-weight: bold; transition: all 0.3s ease; overflow: hidden; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); z-index: 1 !important; } .header-nav-item a:before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: linear-gradient(to right, #d83089, #f15a29); transition: all 0.3s ease; z-index: -1 !important; } .header-nav-item a:hover:before { height: 100%; box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1); } Let me know how it goes and if you need to make any adjustments to the code. Thanks! Edited June 25 by Lesum Sean_9321 1 If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. Sam Web Developer & Digital Designer ☕ Did you find my contribution helpful? Buy me a coffee?
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment