Jump to content

CUSTOM fixed vertical navigation code

Recommended Posts

Posted (edited)

I'd like to put this out there I'm on Brine 7.0, this code is written by Ryan Dejaegher for Squarespace 7.1

I liked it so much I took a chance and injected it into a code block!!! AND IT WORKED!!! Even better it works on independent pages too. Ryan offers this code FREE from one of his blogs, I'm not affiliated with Ryan, I just thought I'd put it out there for all to see!

Settings -> Advanced -> Code Injection -> Footer   

<script src="https://cdn.jsdelivr.net/gh/ryandejaegher/vertical-nav@0.0.5/script.js"></script>
 

<vertical-nav side="right">
  <a href="#">First Link</a>
  <a href="#">Second Link</a>
  <a href="#">Third Link</a>
  <a href="#">Fourth Link</a>
</vertical-nav>
 

 

Please note I am not a web designer or a coding genius, I just like to play around pimping my site and learning.

I think you'll agree with custom icons thrown into the mix side nav looks pretty cool huh? https://fit4thepart.com/new-page-from-wavy-click-thru#what

image.thumb.png.be5c3f4e3b35cbd59a6d9cd7b1f805a1.pngimage.thumb.png.474f21b031731ccbd79403d5e0137058.png

 

Place the code in FOOTER from site-wide, or target per page for even more custom options, you could even insert "left" or "right" into the code for side navigation position, get the code here https://ryandejaegher.com/add-fixed-vertical-navigation-to-squarespace/

Shout out to CANVA for the icons https://www.canva.com/

 

 

Edited by JonTrevor
update on code, improved design with custom icons
Link to comment
  • JonTrevor changed the title to CUSTOM fixed vertical navigation code
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

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.