Jump to content

VERTICAL MENU Customisation

Go to solution Solved by tuanphan,

Recommended Posts

Posted (edited)

Hi everyone,

Password of my project is 2025

I’ve noticed that many users, have proposed various approaches and solutions for implementing a vertical menu in Squarespace. However, it seems there’s still no template or custom code currently available that supports this feature seamlessly.

I have a few specific questions:

  1. How can I move the nav items in that area (up, down, left, and right)?
  2. What’s the best way to align the menu with the Title/Image?
  3. How can I customize the padding of the content area?

Could anyone share their insights or custom solutions that have worked for you? I’d love to hear about any effective methods or code snippets that could help achieve this layout. Like some of the users asking this

Thanks in advance!


Here is the post/code im using at this moment and below the image of the desired menu layout.
 

 

 

Edited by jjohansson
@ mentioning users who are not participating in the conversation
  • Solution
Posted

#1. You can adjust this code

.header-nav {
        position: fixed;
        top: 20%;
        left: 4vw;
        padding: 0 !important;
        transform: translatey(-50%);
    }

#2. To align nav - site title, you can find & change 5vw to 4vw

.header-title {
        position: fixed;
        top: 1vw;
        left: 5vw;
        z-index: 9999;
    }

#3. Padding

Can you take a screenshot?

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!)

Posted

With Nav, find & edit top value

.header-nav {
        position: fixed;
        top: 20%;
        left: 4vw;
        padding: 0 !important;
        transform: translatey(-50%);
    }

with title, find & edit top

.header-title {
        position: fixed;
        top: 1vw;
        left: 5vw;
        z-index: 9999;
    }

 

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!)

Posted
On 10/18/2024 at 6:56 PM, jjohansson said:

That works perfect @tuanphan

I have one last question, see screenshot attached and please let me know how could I set the top of the image to the same height like the Title has.

Thanks!

Screenshot 2024-10-18 at 13.55.21.png

So move image down, or make title up?

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!)

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.