Jump to content

move navigation up aligned with top of logo instead of center?

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

On 7/2/2022 at 9:02 PM, tuanphan said:

Add to Design > Custom CSS

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

 

Thanks! That worked great for the navigation but not the social links. Does that need a separate code?

536225590_ScreenShot2022-07-04at10_31_42AM.thumb.png.f922c7c9e60d0ec154672885c715c35e.png

Link to comment
17 hours ago, tuanphan said:

Use this new code

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

 

That definitely worked to bump both the nav and social links up but they moved to different positions. Any way to keep them aligned? See below1913806993_ScreenShot2022-07-05at11_45_59AM.thumb.png.1a983b35fb9fc77bcf759305b163bb71.png

Link to comment
On 7/6/2022 at 12:46 AM, lamdra said:

That definitely worked to bump both the nav and social links up but they moved to different positions. Any way to keep them aligned? See below1913806993_ScreenShot2022-07-05at11_45_59AM.thumb.png.1a983b35fb9fc77bcf759305b163bb71.png

It worked, however, see this screenshot

Screenshot_3.png.557626d0685835975132128524ba21ae.png

Try adding this to reduce height of menu items

.header-nav-item.header-nav-item--collection {
    line-height: 1;
}

 

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
9 minutes ago, tuanphan said:

It worked, however, see this screenshot

Screenshot_3.png.557626d0685835975132128524ba21ae.png

Try adding this to reduce height of menu items

.header-nav-item.header-nav-item--collection {
    line-height: 1;
}

 

That did it. Thanks for all the help!

Link to comment

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.