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.

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:


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
  • 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!

Code queen and CSS behind InsideTheSquare.co

😃 Free CSS tutorials: insidethesquare.co/tutorials-for-squarespace
🥳 Free 7.1 training course: itssevenone.com/training
👍 CSS Cheat Sheet - codes for 7 & 7.1: insidethesquare.co/css
📚 CSS for Squarespace course: customcodeacademy.com

Link to comment


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.