Скачать или смотреть Change the Color of a Single Navigation Link in Squarespace

In this quick Squarespace 7.1 tutorial, I’ll show you exactly how to change the color of a single navigation link using simple CSS, perfect for highlighting key pages in your menu. Head to the blog for the full code snippet, step-by-step instructions, and tips to customize your site even further.

——————

🔗 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:
Tip! Simply change the number after nth-child to whatever number the link you’re trying to target is from the left.

// change one nav link color //
.header-nav-item:nth-child(2) a {
 color: #7cccbd !important; }

// change one dropdown link color //
.header-nav-item:nth-child(2)
.header-nav-folder-item:nth-child(2) a {
color: #7cccbd !important; }

// change one nav link color on mobile //
@media only screen and (max-width: 767px) {
.header-menu-nav-item:nth-child(2) a {
color: #7cccbd !important; }}

// make a link look like a button //
.header-nav-item:nth-child(2) a {
font-size: 12px;
padding: 5px 16px !important; 
color: #ffffff;
background: #7cccbd;
border-radius: 15px; }

// change the login link color //
.user-accounts-text-link {
color: #7cccbd !important; }

——————

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 :)