Jump to content

Vertical navigation to the left

Go to solution Solved by MayaViolet,

Recommended Posts

If you want it to be a "true" navigation, i.e. accessible for screen readers etc, you're going to need a fair bit of CSS and it's going to be a bit of a headache tbh. You could try something like Rebecca Grace's code but it may not be what you're looking for.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

For Custom Plugins email me 🧩

Link to comment

Hello

Thank you to your both! I tried with Rebecca Grace's code and it almost worked! However it made the whole header go vertical and not just the navigation. The navigation should also be left-aligned. Do you know what to change in the code?

Code:

 

@media only screen and (min-width: 991px) {
  .page-section:first-of-type {
    padding-top: 0px !important;
  }
  .page-section {
    margin-right: 100px;
  }
  #header {
    width: 100px;
    position: fixed;
    height: 100vh;
    z-index: 99999 !important;
    display: table;
    writing-mode: vertical;
    text-orientation: mixed;
  }
  .header .header-announcement-bar-wrapper {
    padding: 10px 30px 10px 10px;
  }
  .header-inner {
    height: 100vh;
    display: table-cell;
    vertical-align: middle;
    text-align: left; /* Add this line to align the text to the left */
  }
}

The url is https://porpoise-keyboard-td6m.squarespace.com/ and pw is squarespace

Thank you very much! Have a nice day 🙂

Link to comment
.header-layout-branding-center-nav-center .header-title-nav-wrapper {
flex: 0 0 100%;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
    text-align: left;
}
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav .header-nav-list {
    justify-content: left;
    flex-direction: column;
    text-align: left;
}

Try the above - Not sure if that is your final preferred outcome?

Link to comment
3 hours ago, WebShark said:

Hi! 

Thank you very much! This is so close to what we wish for!

The navigation should be going more down the site to the left. I did not really describe this well before, I am sorry. Is this solution possible? 🙂 Thank you once again!

image.thumb.png.810bd6911f296faacb3c7efe49000eb3.png

Yes, solution is definitely possible but I think we need to clarify a few more design details first 🙂

Do you want the navigation to sit fixed on the left side of your site content, meaning it stays present even as users scroll down the page? To do so, we would need to target the header-nav and place it on the left side, but also add a left-margin to the entire site's page content, so they don't overlap.

If you can provide your big-picture vision, that would help us be able to develop and share accurate code!

Link to comment
  • Solution

@WebShark Ok, the first step would be to set your header style to "Fixed" as referenced here.

Then, try applying the follow CSS:

 

/*--- Header Navigation - Fixed Left ---*/

@media all and (min-width: 768px) {

/* Navigation Position */
.header-layout-branding-center-nav-center .header-title-nav-wrapper .header-nav {
    margin: 0;
position: fixed;
    left: 0;
    top: 100px;
width: 15vw;
}
.header-nav-list>div {
    white-space: inherit;
}

/* Page Content Width */
main#page {
    width: 85vw;
    margin-left: auto;
}
}

 

Lmk how that works!

Link to comment
  • 1 year later...
  • 2 weeks later...
On 8/9/2024 at 6:51 PM, NashJ said:

i want to do this to my site too. where are you inputting that code?

@NashJ The CSS in the accepted solution requires the header style with centred branding to be active. If you have chosen a different header layout, you'll need to remove .header-layout-branding-center-nav-center from the selectors.

Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.

Would you like your customers to be able to mark their favourite products in your Squarespace store?

Link to comment
  • 1 month later...

Hello @MayaViolet and @paul2009


Im trying to adapt this code to a site, I need help with the Desktop version in order to:

- Align of the Logo to the left of the page
- Menu items aligned with the start of the logo (learn how to move them up, down, left or right.)
- Set the same background color of the site (I get by default white)

Here is a test site:

https://hughgordon-test.squarespace.com
Password: 2024

Edited by jjohansson
Link to comment
On 9/29/2024 at 3:39 AM, jjohansson said:

This is the Menu ubication im looking for... 

SAMPLE.jpg

Try this to Website Tools > Custom CSS

@media screen and (min-width:992px) {
  .header-title {
    position: fixed;
    top: 3vw;
    left: 2vw;
    z-index: 9999;
    text-align: left !important;
}
.header-nav {
    position: fixed;
    top: 10vw;
    left: 2vw;
    padding: 0 !important;
}
  nav {
    flex-direction: column;
  }
  div.header-nav-item {
    margin: 0 !important;
    text-align: left !important;
}
  div.header-nav-item  a{
   display: inline-block;
}
.header-actions.header-actions--right {
    position: fixed;
    left: 5vw;
    bottom: 2vw;
    justify-content: flex-start !important;
}
.header-actions--right .header-actions-action a {
    margin-left: 0 !important;
    margin-right: 2.5vw;
}
#page article section {
    max-width: 75%;
    margin-left: 25%;
    padding-top: 0 !important;
}
header#header {
    background-color: transparent !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 10/7/2024 at 10:19 PM, recycledfashion said:

Hello, 

 

I am trying to do the exact same thing to my website.

I would like a vertical, left aligned navigation menu.

It seems like I've tried every code on every forum, but none have worked and there's no squarespace template with a left aligned navigation menu in 7.1, frustratingly. If there is one, I'd love to know!

 

I used text blocks to show what it should look like.

 

When I tried the code above, this is what happened, shown in the second image. There is white space behid the navigation and the navigation titles are spread apart strangely. 

The third image shows what the site's navigation currently looks like.

 

Screen Shot 2024-10-07 at 4.16.08 PM.png

Screen Shot 2024-10-07 at 4.14.42 PM.png

Screen Shot 2024-10-07 at 4.17.01 PM.png

Can you share site url?

On 10/7/2024 at 10:21 PM, recycledfashion said:

Also, when I used the code above, it squished everything else on my page over to the right. I want the navigation to exist over my section if possible? Laid on top of it versus next to it.

You can remove this code

image.png.31e7ad99350bb8cc66d46451d4048a4e.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

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.