Jump to content

Attempting to turn Navigation menu into buttons

Recommended Posts

Posted

 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.image.thumb.png.7f2131610eaa550afdeacca8099ba7b3.png

Posted (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 by Lesum

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?

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.