How to Add together a Driblet Down Navigation Menu in Squarespace

Disclosure: Some links in this post are affiliate links. If you click through and pay for a production, I'll be compensated at no cost to you.

I'chiliad a fan of drop-down navigation menus because they help keep your navigation clean and easy to utilise. On my site, I employ a drop-down for my Services making it simple for site visitors to find what they are looking for. In this mail service, we'll encompass:

  • how to add a drop-down menu to your Squarespace website

  • how to add custom code so the top card item of a driblet-down isn't clickable (this is a pet peeve of mine on Squarespace 7.one - y'all can click it simply it doesn't go anywhere)

  • a user-friendly selection for a more complex navigation carte du jour

How to add a driblet-down card in Squarespace

Follow the steps beneath or watch the video:

  1. In your Pages menu, under Main Navigation, click the + sign to add together a Binder. You can observe this at the lesser of the pop-up window under More.

  2. Change the folder name to your Navigation drop-downward title.

  3. Elevate and drib the folder in the gild you'd like your navigation menu items to appear.

  4. Drag and drib any existing pages underneath the binder (where it says Empty Binder) to add pages to your drib-downward card or click + under the binder to create new pages in your dropdown carte du jour.

Make the elevation menu item of your driblet-down navigation not clickable

I mentioned earlier that this is a pet peeve of mine. In Squarespace 7.1, the top-level navigation for drop-down menu items is clickable fifty-fifty though it doesn't practise anything when y'all click it. This is a poor and oftentimes disruptive user experience, so I add code to make that tiptop-level menu item not clickable. You lot can paste in this code under Blueprint > Custom CSS and it will apply to all the "folders" (pinnacle-level items for drop-down menus) on your site: 

/* make nav binder not clickable */ .header-nav-binder-title {   pointer-events: none; }

Need a solution for a more complex navigation construction?

mega menu

In that case, I'd recommend adding a Mega Bill of fare for your desktop view. My favorite is the Mega Menu for Squarespace 7.1 from Will Myers. You can add whatsoever blazon of blocks (images, summaries, newsletter sign-ups) that display when you hover over a particular card item and it's simply $ten for a single website license. Cheque out the details here.

Christy Cost

Christy is a Squarespace Expert and Authorized Trainer based in Austin, Texas.

https://christyprice.com