Jump to content

Centring Navigation Links with CSS Leaning Right

Go to solution Solved by Ziggy,

Recommended Posts

I've tried many bits of code to try and centre the navigation on this site: https://www.badcallbayretreat.com password: badcallbay

Any code that actually works is still making the navigation menu lean to the right, I'd like it to be centred. This is the code I'm using right now:


nav.header-nav-list {
    flex-wrap: nowrap;
}
.header-title {
    width: 10% !important;
    flex: 1 1 100% !important;
}

 

Can anyone help with this? Would be greatly appreciated!

Link to comment
  • Replies 8
  • Views 250
  • Created
  • Last Reply

Top Posters In This Topic

Add this to Custom CSS:

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 0 0 100%;
}

 

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 hour ago, Ziggy said:

Add this to Custom CSS:

.header-layout-branding-center-nav-center .header-title-nav-wrapper {
    flex: 0 0 100%;
}

 

It's still leaning to the right

Link to comment

It doesn't look like you've added the code for me to check how it is behaving. When I adjust with the code I gave you this is the outcome:

image.thumb.png.9630a185a57a0260e704de4beaa67aa7.png

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
  • Solution

That only happens for me on smaller screen widths, it's not helped by the site margin set to 10vw which consistently squashes the content into the center 80% of the screen. you can alter this in Styles and Spacing.

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
21 hours ago, Ziggy said:

That only happens for me on smaller screen widths, it's not helped by the site margin set to 10vw which consistently squashes the content into the center 80% of the screen. you can alter this in Styles and Spacing.

Changed the site margin to 5px and this has solved it, thanks so much!

Link to comment
1 hour ago, HKins said:

Changed the site margin to 5px and this has solved it, thanks so much!

Brilliant!

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.