How to make a flip navigation effect on Squarespace 7.1

This tutorial will show you how to create a flip effect to your site navigation. Note this only applies to the desktop navigation.

Complexity: Easy

---

Step 1

Simply copy the css code below. Then head to ‘Design’ and then ‘Custom CSS’ and paste the code.

// Flip Navigation Links //

.header-nav-item a {
  transition: all ease-in-out .5s !important;
}

.header-nav-item a:hover {
  transform: scaleX(-1) !important;
  transition: all ease-in-out .5s !important;
}

.header-nav-item--active a {
    background-image: none !important;
}  background-image: none !important;
}

---

Step 2

You can change transition speed values to your liking

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ‘as-is’. Other than as provided in this agreement, this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, we recommend that you purchase the services of a developer.