Jump to content

Social Link not lining up on Header

Recommended Posts

Site URL: https://www.hightidehr.je

Hi everyone

I'm wondering if someone can help me with a social link not lining up correctly on header.  I've added the requested social link (linkedin) via the usual editing bar for the header, and the logo is appearing at the top left of the header.  

I'd like it to line up alongside the word 'contact' if possible please.  

See attached screen shot of where the logo sits when it's been added.

I've had to take the social link off until I get some help with this, as the site is live.

Thanks in advance

Sam

Screenshot 2022-09-30 at 07.46.43.png

Link to comment

Hi @Sam-Logie, there's not a native option currently for the logo and navigation to be stacked and centered and have the social links on the right. This code will at least align the social link with the navigation, and I would suggest that you set the header in the design to Full rather than inset.

.header-display-desktop {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

Alternatively it may look better to push the social links up to the top corner, in which case change the word end for start in the CSS.

Hope this helps!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
7 hours ago, Ziggy said:

Hi @Sam-Logie, there's not a native option currently for the logo and navigation to be stacked and centered and have the social links on the right. This code will at least align the social link with the navigation, and I would suggest that you set the header in the design to Full rather than inset.

.header-display-desktop {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

Alternatively it may look better to push the social links up to the top corner, in which case change the word end for start in the CSS.

Hope this helps!

Hey Ziggy

Thanks so much for your quick reply.  This code moved the linkedin logo to the far left of the screen, in line with the nav bar but not quite where I wanted it.  (see attached screen shot).  It it possible to get the logo to line up next to the word 'contact' please? 

I've taken the logo off the header for now as the site is live, but you can see where it ended up on the screen shot.

thanks in advance for your help

Sam

352945093_Screenshot2022-09-30at15_49_55.thumb.png.9a7b219746b04b4ffc40e3c7007370f6.png

Link to comment

 

16 minutes ago, Sam-Logie said:

It it possible to get the logo to line up next to the word 'contact' please? 

7 hours ago, Ziggy said:

there's not a native option currently for the logo and navigation to be stacked and centered and have the social links on the right

I don't know of a way to move that effectively to the right of contact, hence giving you an option to hopefully get it looking better, if not exactly what you wanted. Sorry about that!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
2 minutes ago, Ziggy said:

 

I don't know of a way to move that effectively to the right of contact, hence giving you an option to hopefully get it looking better, if not exactly what you wanted. Sorry about that!

Hi Ziggy

Ah of course, sorry I misunderstood your last message.  I really appreciate your help, thank you so much

Have a nice evening

Sam

Link to comment

No problem! More flexibility in positioning of header elements is something that I've requested of the Squarespace development team, maybe they'll implement that in the future, fingers crossed!

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.