Align navigation links with site logo in site header?

Is there a way to move the navigation links vertically so they line up exactly with my site logo in the header?

davidjcavallo.com

See attached screenshot.

Thank you!

David

Can you share your website URL? Thanks!

http://davidjcavallo.com

Thank you.

.header-layout-nav-right .header-nav {
    text-align: right;
    margin-left: auto;
    padding-left: 1vw;
    margin-bottom: 18px;
}

8 hours ago, DCavallo said:

http://davidjcavallo.com

Thank you.

It would be easier to align these if there wasn't padding built into your logo, especially at the top:

If  you can crop and re-upload your logo first, then all you need is this line of Custom CSS to align the items to the top of the header flex box:

.header-title-nav-wrapper {
    align-items: flex-start;
}

Hope that helps!

Thank you! I will work on fixing my logo and go from there.

Regards,
David

11 hours ago, Mdhanjal said:

.header-layout-nav-right .header-nav {
    text-align: right;
    margin-left: auto;
    padding-left: 1vw;
    margin-bottom: 18px;
}

 

Thank you for your response. This doesn't seem to have fixed the issue, but I think my logo needs to be adjusted before CSS can help.

14 hours ago, DCavallo said:

my logo needs to be adjusted before CSS can help

That's right, adjust the logo, and then add:

.header-title-nav-wrapper {
    align-items: flex-start;
}

This code will align the header items (logo and navigation) to the top, but with the designed in padding on the logo, it won't appear aligned to the top.

Hi there,

am hoping this thread is still active...? I have an alignment with my logo, navigation and social icons that I'd like to fix so the baselines (bottom edge of text) for all match horizontally

https://gar-sunflower-adz6.squarespace.com/home

I tried the above codes with adjusting numbers but nothing altered.

Grateful for some advice pls

thanks!

Nicola

2 minutes ago, NicolaH said:

https://gar-sunflower-adz6.squarespace.com/home

The website is private, can you add a site wide password?

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

Hello there,

I have the same issue.

I raised the width of my logo that seemed to small for me.
And now all my navigation items looks way higher than the logo.
My logo seems to be alright in terms of padding though.

But I tried the different codes and it doesn't seem to work.

Here is the link to the website: 
https://www.soadestudio.com/

Thanks a lot for your help

51 minutes ago, Delphinesoade said:

But I tried the different codes and it doesn't seem to work.

It looks pretty well aligned to me:

Hey @Ziggy 

I have now added a password to the site – SPConsulting1

Thanks

2 minutes ago, NicolaH said:

I have now added a password to the site – SPConsulting1

Try this:

.header-display-desktop {
  align-items: flex-end;
}
.header-title-nav-wrapper {
  align-items: flex-end;
}

@Ziggy thanks loads! That worked 😀