Jump to content

Header Layout - page links placement

Go to solution Solved by Ziggy,

Recommended Posts

Hi,

I'm new to this website building, so I was hoping there's someone out there who could help me with a layout ques.

I want to move my page links WORK, ABOUT, AWARDS, and CONTACT a bit to the left on my site but the tools don't allow me to do so. So does anyone how that's achievable? 

Best

nsk 

Screenshot 2023-02-16 at 18.01.55.png

Link to comment

The horizontal padding is based on the site margin, found in the styles menu -> spacing.

You can also change the heading width by editing a page on your website, editing the header, and changing it to Inset.

image.png.d6e1a03a432508f4e33f238f85766cd0.png

There are also code solutions that would change the padding just on that side of the header if you want a very specific change.

What are you trying to achieve? Can you share your website URL so I can 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 

  Did I help? Buy me a coffee?

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

Link to comment

For that you want the "Inset" option in the header settings. It will line up the width of the header with the width of the page contents.

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 

  Did I help? Buy me a coffee?

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

Link to comment

It has worked, but the contents of the text block "Adobe Stock is pretty much...." is not at the edge of the page, so that's why it doesn't line up.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

Did you move that text block one grid square to the right?

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment

This is what it looks like if you move that text block to the right, or extend it one block to the right:

image.thumb.png.5904d40674154b25c6b4ecdbe57e956d.png

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

Link to comment
  • Solution

It'll be rather tricky to get that to work consistently because of how the grid scales on narrower screens (the width of 1 column varies), but you can try adding this to custom CSS (under the styles menu), and adjust the px value until you're happy with it:

.header-layout-nav-right .header-nav {
    margin-right: 60px;
}

Hope that's the solution you're looking for.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

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

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.