Jump to content

Split navigation in combination with clickable dropdowns

Recommended Posts

Site URL: https://tunny-carnation-hmal.squarespace.com/

Hi,

I'm not great with code, but have tried all sorts and can't get any further. I'm trying to combine split navigation (which works perfectly, using instructions from this blog: https://stnsvn.com/blog/how-to-make-a-split-navigation-in-squarespace-71) but then I also want clickable dropdowns (so I have used code from this blog: https://sf.digital/squarespace-solutions/how-to-make-squarespace-navigation-dropdowns-clickable). It works perfectly on the "about"-dropdown, but I can't make it work for the "services"-dropdown. 

And whilst I'm here I would also like the "services" dropdown items to be right aligned, and I'm struggling to target them especially...

Anyone who can help me here?
Website password is "empirehomes"

Thanks in advance!

Edited by Swedish_Kat
Link to comment

It looks like the folder click is working on both folders.

To right align Services, try this:

.header-nav .header-nav-item--folder:nth-child(2) .header-nav-folder-content {
    right: -1em;
    text-align: right;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thanks for your reply Ziggy! 

That bit of code has right aligned, but it's now going outside the window, I've tried playing around with different values of em...

When you click on "services" you end up on the "services-contracting" page, which is the first page in the dropdown. But I want it to lead to "/services" (I've created this page, and it only says "services" as a header on it). So unfortunately still doesn't work...

Link to comment

I've adjusted the code below, we needed to override the left property:

.header-nav .header-nav-item--folder:nth-child(2) .header-nav-folder-content {
  right: -1em;
  left: auto;
  text-align: right;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
13 minutes ago, Swedish_Kat said:

I ended up using this workaround for my problem with the dropdown links:
https://www.will-myers.com/articles/clickable-dropdowns-in-squarespace

Perfect, glad that working!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.