How to Create a Vertical Navigation in Squarespace 7.0
So you have come across a website with a vertical navigation and want to implement it on your own site. There are only a few Squarespace templates that have the option for a vertical navigation. If the template your using does not have this option, you either need to change templates (which can be a huge pain) or add some custom code.
But don’t fret! I’ve got you! There are a couple of ways this can be done. If you want to change your current horizontal navigation to be vertical, then this video is for you.
In this video, I show you how to create a vertical navigation on your Squarespace site using your current horizontal header navigation. To help your site be more mobile friendly, I have put the code within a media query so that the code will only run when the screen is not on a mobile device. If your site is being viewed from a mobile device, then the regular mobile navigation will appear. The code used in the video is provided below.
The following code is used in the video.
@media only screen and (min-width: 640px) { .Content-outer { margin-right: 5vw !important; } .Header { position: fixed; height: 100%; writing-mode: vertical-rl; text-orientation: mixed; text-align: center; z-index: 99999 !important; right: 0px; } .Header-inner { padding: 10px; } }
Want some other Vertical Navigation Options?
Check out some of our navigation and sidebar plugins.
