Jump to content

Get navigation links to align with logo

Recommended Posts

Hi there! I tried to look for an answer to this but couldn't find it. Might be searching the wrong things.

But, my problem is that I can't seem to get my navigation links to align with the uploaded logo. Even when I choose a logo that's all one line, for example. And adjusting the padding just brings it all down together. So my question is: how do I get the navigation links to align with the center of my logo?

I've currently used custom coding to get the navigation links to move to either side of the logo. But as you can see, they sit really high up there. 

Any help is appreciated! Site isn't live yet so I've attached a screenshot. 

Screenshot 2023-09-08 at 15.43.12.png

Link to comment
  • Replies 5
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Firstly can you share your website URL so someone can take a look. You can add a site wide password since it's not live, and share that.

Can you also share the code you used for the split navigation (if it was freely available, not paid for) and where you got it? 

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

The split navigation code is from the folks at The Styled Squared and I've pasted it here below! I have the logo set to the center in the 'Header Layout' section. 

Thanks in advance for any advice! 

// SPLIT NAVIGATION

.header-nav {
    position: absolute;
    top: 0px;
    bottom: 0;
    margin-top: 0!important;
    margin-left: 0px!important;
}

.header-nav-item:nth-of-type(3) {
    margin-right: 340px!important;
}

.header-title-logo a {
    z-index: 1000;
    position: relative;
}
 

Link to comment

You may want to try changing this value: 

top: 0px;

But can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, mizc said:

Ah so simple in the end! Playing with the top px worked. Thank you!! 

Changing the fixed px value may well work fine, but it could be better to center-align it, hence asking for your website URL to take a look.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? 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.