Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Custom website menu style


oxmoserecords

Question

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
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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

Create an account or sign in to comment

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


×
×
  • Create New...