Styling the Dropdown Menu in Squarespace! [Updated 2024]
Learn how to style and customize dropdown menus in Squarespace with our step-by-step tutorial. This updated guide shows you simple CSS tips and design tricks to create a clean, modern navigation for your Squarespace 7.1 website.
——————
🔗 Original post:
https://ajmexperience.com/learn-posts...
🎥 Subscribe for more Squarespace CSS Hacks and tips:
/ @ajmexperience
📸 Follow us on Instagram:
/ ajmexperience
💡 For more Squarespace tips to enhance your website designs, check out the rest of the learn series:
https://ajmexperience.com/learn
✉️ Sign up for our newsletter for updates, freebies, insights and more:
https://www.ajmexperience.com/newslet...
🖥️ Save hours of wireframing and mobile optimization with our Layout Templates:
https://www.ajmexperience.com/squares...
📖 Get our free CSS Selector Cheat Sheet:
https://www.ajmexperience.com/css-che...
📚 Get our full CSS Library:
https://www.ajmexperience.com/squares...
——————
Here’s the CSS:
// DROPDOWN PADDING //
.header-nav .header-nav-item--folder .header-nav-folder-content {
padding: 0px; }
// DROPDOWN CONTAINER //
.header-nav-folder-content {
border-radius: 6px;
background: #319aab !important; }
// LINK STYLING //
.header-nav-folder-item { a {
color: #ffffff !important;
padding: 15px !important; }}
// HOVER COLOR //
.header-nav-folder-item:hover {
background: #fac827 !important; }
// MATCH BORDER RADIUS OF THE CONTAINER //
.header-nav-folder-item:first-child:hover { border-radius: 6px 6px 0 0;}
.header-nav-folder-item:last-child:hover { border-radius: 0 0 6px 6px;}
// HOVER LINK STYLING //
.header-nav-folder-item:hover {
a { color: #000000 !important; }}
// DROP SHADOW //
.header-nav-folder-content {box-shadow: 2px 2px 5px rgba(0,0,0,.2)}
// REMOVE ACTIVE MAIN NAV UNDERLINE //
.header-nav-item--active a {
background-image: none !important; }
// REMOVE ACTIVE NAV UNDERLINE WITHIN DROPDOWN //
.header-nav-folder-item--active .header-nav-folder-item-content {
background-image: none !important; }
// LEFT ALIGN DROPDOWN LINKS //
.header-nav-folder-item {
text-align: left; }
// MAKE THE ENTIRE HOVER AREA CLICKABLE //
.header-nav-folder-item a {
display: block; width: 100%; height: 100%; }
——————
New to Squarespace?
We love it and we think you will too! Use our code PARTNER10 for 10% off!
Try Squarespace ⇨ https://squarespace.syuh.net/c/496021...
Join Squarespace Circle ⇨ https://squarespacecircleus.pxf.io/c/...
New to my channel?
🖥 AJM Experience is a marketplace and learning space for Squarespace designers & CSS nerds: https://www.ajmexperience.com/
Thanks so much for watching! I'm Amanda 👋 and I am a Squarespace website designer and CSS nerd. I've launched over 200 Squarespace sites (and still actively design for clients every day!), but there's nothing I love more than sharing my knowledge with the rest of the Squarespace community :)
If you learned something from this video, here's the best way to show your appreciation:
📹 Subscribe to my channel ⇨ / @ajmexperience
☕️ Buy me a coffee ⇨ https://www.buymeacoffee.com/ilyajm
——————
Our Favorite Tools:
✨ ElfSight ⇨ https://go.elfsight.io/click?pid=1575...
💻 AJM Squarespace CSS Library ⇨ https://www.ajmexperience.com/squares...
📐 Squarespace Layout Templates ⇨ https://www.ajmexperience.com/squares...
👻 Ghost Squarespace Plugins ⇨ https://ghostplugins.peachs.co/a/ajme...
🧩 SQSP Themes Plugins ⇨ https://transactions.sendowl.com/stor...
🌐 Squarespace ⇨ https://squarespace.syuh.net/c/496021...
——————
This article contains affiliate links. Whenever you buy something through one of these, I get a small commission, without any extra cost to you :)