Squarespace Navigation Bar | How To Make Your Nav Into A Vertical Sticky Sidebar | Brine

Any chance you could offer some advice for the Sonny Template family?

This code did not work for me for some reason

this was the code i entered

.Header-nav--secondary {
width:100vh;
position: fixed;
-webkit-transform: rotate(-90deg) translateX(-85%);
-webkit-transform-origin: left top; left:0;
text-align: center;
z-index: 1000;
}

Hi Carly! Thank you for this tutorial it is incredibly helpful! Id like to do a spit nav in the header and so I want to continue to use my secondary nav as is and perhaps move the footer into the vertical navigation. Any ideas?

Hi carl! It's possible to do it but on the right side of the screen? Thank you!

Thanks for this! However, it doesn't seem to show up consistently..I have a cover page that I have the nav hidden on, and then gallery pages where this should show up. It sometimes shows up on my cover page (where I don't want it) and then doesn't show up on my gallery pages (where I do). If I do a "hard refresh" then it works.. but that isn't an ideal way for making this site public. Any idea why this is happening?

Is there a possibility to do this in 7.1? With social icons?

Honestly, your videos are blurry when you show your code. I'm on a mac 13" I love your channel but it's hard to see the code

Could you show a clear view of what you're about to build (i.e. not a 2 second cropped clip, but full screen view) at the beginning? I've come across your videos a few times and it's a bit frustrating trying to get to the finished result to see if it's what I'm looking for, thanks!

Hi Carl thank you so much for this, works really well!
I wonder if I could put a background colour to this vertical secondary menu?

Carl, I'm trying to do a effect, where I hover over the menu text and it becomes a different color. Is this possible?

The code to fix it would work but the rotate code woudlnt work and the positioning code didn't move the nav around in the same manner as yours. I'm on squarespace 7.0 and was following instructions exactly! :/

Another wicked video! Thank you so much!
I have a question though - you know, when you put all these tutorials out, you surely know code well. I really want to learn it too, but what would be the best starting point? I am currently watching your videos (of course), and some others mainly covering basics of HTML & CSS.
🤘

Hi! Is there a way to enable a vertical navigation that runs down the left side but maintain a normal/horizontal nature of the text of each page title? Thanks x

Hi Carl, how can I make a Vertical Sticky Sidebar in Squarespace 7.1?

is this working on squarespace 7.1?

Hey Carl, great stuff, thank you!!
I got an issue on the mobile version, the single themes don’t show from the top to the bottom. They are vertical and ordered from left to the right - collapsing with my text in the center. is there a way to solve this issue? Cheers, Sanela

Hey! Shot you an email about this, but I've never been able to figure out how to place elements relative to each other in squarespace. Let's say I want a line pointing at a super specific part of an image, and I don't want the line to shift as the size of the page shifts, and I don't want to use photoshop, how do I DO that?
I've actually been searching for years for the answer to this 😅

Thank you for sharing! For some reason, I can't get anything to effect my secondary nav though. The .header-nav--secondary is not working for me. Any thoughts?

This is INCREDIBLY helpful! Thank you! If we wanted to keep the secondary navigation up on the top, would we change
.Header-nav--secondary {
to
.footer or .insert-name-of-non-linked pages?

Hi I keep coming back to your videos, they are a great resource. With vertical nav i tried it on the left side of the browser screen, it workded, I liked it, but found I couldn't click the 'x' to cancel items from the shopping cart with the vert nav in the way...any suggestions to work around this?

Can you please send me the CSS code for the nav-vertical sticky sidebar for Squarespace 7.1?

Boss Is there any code that opens direct only navigation in mobile view when I click on the image in squarespace? Not that open navigation link page

Hi Carl! Thank you for this video! For some reason why my syntax keeps saying there is an error in the webkit line. It is not turning the navigation vertical. I followed the instructions from the video. Let me know if you can assist in anyway!


.Header-nav--secondary {
width:100vh;
position: fixed;
-webkit-transform: rotate{-90deg} translateX{-85%};
-webkit-transform-origin: left top; left:0;
text-align: center;
z-index: 1000;

Best SQSP custom-lessons, bar none! 👌🏼😊

Really you are great, Awesome

Great video !!! help a lot !!! Could you show me once I have the secondary nav on the left how could I rotate the texts and organize them as a column?

Your tutorial is really clear and useful! could you show me how to add font on top of my image? and also add link to these font to another page? Thank you!!

lol. I just saw this. Thanks Carl!

Hi Carl, Great Video. I would like you to show how to do a lateral parallax effect, Thank U

Great Video. Is it possible to show how to get a scrolling banner with fixed title text/button? For example in the template in this video the tea cup banner scrolling but the text staying static

Hi Carl,
Loving your tutorials.
Do you have a script/tutorial for making a Brine Template navigation sticky for both desktop & mobile?

It published on my birthday thanks you so much !

great video once again Carl! Thanks.

Thanks Carl!