Sliding lines on hover for nav links (Brine 7.0) - Header nav

All CSS tricks7.0Hover/overlay
Written By Beatriz Caraballo

ABOUT

Looking to add a little something to your navigation links in Squarespace (Brine 7.0)? Then grab this quick code snippet to add a simple yet interesting-looking hover effect!

You’ll get two sliding lines, of the color and thickness of your choice, marking the link your user is hovering over while on desktop devices.

  • This particular snippet is compatible with:

    • Any header and navigation layout

    • Squarespace 7.0 (Brine template family)

Beatriz Caraballo

Hey! I’m B, a customization expert.

I code the heck out of Squarespace and teach other designers how to do it too, one wtf at a time.

https://beatrizcaraballo.com
Previous

Background color for top header on one page (Brine 7.0) - Header nav
Next

Custom burger button for mobile (7.1) - Header nav