Vertical Navigation — Height Issue

Site URL: https://okra-disc-mmrd.squarespace.com/

Hello — 

I'm trying to create a left-justified vertical navigation bar and I've almost got it, but when I tried to bring the whole thing down a bit from the top edge of the page, it created this gap between the top of the navigation and the site content — website with these changes is not yet live but here is a screenshot of what I mean.

Is there a way to fill that gap while still giving the links some breathing room?

Thanks so much!

Hi,

I see you removed this layout? Do you still need help?

23 hours ago, tuanphan said:

Hi,

I see you removed this layout? Do you still need help?

Yes, I would still love help — I removed it because I noticed it was just overlaying the existing content, not moving it over to make room for the navigation, if you can help with that as well?

thanks!

On 9/18/2024 at 8:22 AM, rosebudphoto said:

Yes, I would still love help — I removed it because I noticed it was just overlaying the existing content, not moving it over to make room for the navigation, if you can help with that as well?

thanks!

If you can add it back, I can check easier

If the site is live & you can't add it, you can duplicate site & do there

On 9/19/2024 at 3:03 AM, tuanphan said:

If you can add it back, I can check easier

If the site is live & you can't add it, you can duplicate site & do there

Duplicate site here: https://pepper-tangerine-h3zw.squarespace.com/

On 9/21/2024 at 3:53 AM, rosebudphoto said:

Duplicate site here: https://pepper-tangerine-h3zw.squarespace.com/

Site is private

You can follow this

10 hours ago, tuanphan said:

Site is private

You can follow this

 

Apologies — password is "2025"

On 9/24/2024 at 5:32 AM, rosebudphoto said:

Apologies — password is "2025"

Try remove your code & use this new code

@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;
}
}