Add and Customize Header Dropdown Icons in Squarespace

Want the dropdown menus to be more obvious on your Squarespace sites? We can now add icons!

I also couldn’t resist throwing in some CSS customizations :)

🔗 Original post:
https://ajmexperience.com/learn-posts/add-a-header-dropdown-icon-in-squarespace

🎥 Subscribe for more Squarespace CSS Hacks and tips:
https://www.youtube.com/@UCOpV47dVYOxhUUWhpY34MaA

💡 For more Squarespace tips to enhance your website designs, check out the rest of the learn series: https://ajmexperience.com/learn

🖥️ Save hours of wireframing and mobile optimization with our Layout Templates
https://www.ajmexperience.com/squarespace-section-templates

📌 Follow along on Pinterest:
https://www.pinterest.com/AJMDesignStudio/

📖 Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-cheat-sheet

📚 Get our full CSS Library:
https://www.ajmexperience.com/squarespace-css-library

📸 Follow us on Instagram:
https://www.instagram.com/ajmexperience/

——————

✨HERE'S THE CSS:✨

// change the color of icons with stroke //
.header-dropdown-icon svg {
stroke: #7cccbd !important; }

// change the color of icons with fill //
.header-dropdown-icon svg {
fill: #7cccbd !important; }

// add bounce animation to icons //
.header-dropdown-icon {
animation: bounce 1.5s ease-in-out infinite; }
@keyframes bounce { 0%, 100% {
transform: translateY(-1px); } 50% {
transform: translateY(2px); } }

——————

🛠️ Our Favorite Tools:
✨ ElfSight ⇨ https://go.elfsight.io/click?pid=1575&offer_id=3
💻 AJM Squarespace CSS Library ⇨ https://www.ajmexperience.com/squarespace-css-library
👻 Ghost Squarespace Plugins ⇨ https://ghostplugins.peachs.co/a/ajmexperience
🧩 SQSP Themes Plugins ⇨ https://transactions.sendowl.com/stores/9361/298972
📐 Squarespace Layout Templates ⇨ https://www.ajmexperience.com/squarespace-section-templates
🌐 Squarespace ⇨ https://squarespace.syuh.net/c/4960217/1409264/9084

——————

AJM EXPERIENCE
🖥 A marketplace for graphic designers, Squarespace lovers, & CSS nerds: https://www.ajmexperience.com/

☕️ Buy me a coffee: https://www.buymeacoffee.com/ilyajm

Thanks for watching and hope you learned something. My name is Amanda Jones McNay and I am a Squarespace web designer and CSS nerd. I have designed over 200 different Squarespace sites for clients and have used custom CSS code in every one of them. My site is dedicated to helping all CSS designers to perfect their craft and create cool sh!t.

——————

⚠️ This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)

Видео Add and Customize Header Dropdown Icons in Squarespace канала AJM Experience