Jump to content

Custom website menu style

Recommended Posts

Site URL: https://kazoo-bulldog-snp5.squarespace.com/

Hi everyone,

I am creating a new website via Squarespace platform. The template is Brine Family 7.0.

https://kazoo-bulldog-snp5.squarespace.com/
Password to access is: 1234

You can see my current menu style. This is out of the box with Squarespace, I want to custom it with some code.

And Reuse this menu effect:

http://editionsmego.com/


However, with another color, the blue of our site.

Do you have any code suggestion for that?

Thanks a lot for your kind help!

Link to comment
  • Replies 3
  • Views 370
  • Created
  • Last Reply

Hey @oxmoserecords - I can help ya 🙂  That low highlight effect can be done with a little clever background gradient code. I have a tutorial about it on my youtube channel here. Long story short, this code will add that effect for active links:

 

.Header-nav-item--active{ background: linear-gradient(to bottom, #FFF 50%, #0015ff 50%)!important; color: #000!important}

And this one will do it for you on a hover.

.Header-nav-item:hover{background: linear-gradient(to bottom, #FFF 50%, #0015ff 50%)!important; color: #000!important}

You can play around with those percentages to make it perfect for your own site aesthetic 🙂 Hope this helps - let me know how it goes!

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.