Jump to content

CSS code for changing left/right padding for header

Recommended Posts

Hello,

I want to know the CSS code for changing left/right padding for header. (image attached)

I tried lie this :

Header-inner {
    padding-left: 40px;
    padding-right: 40px;
}
 

But nothing changed.

Can you tell me how to change this ?

 

Thank you.

 

change the interval.png

Link to comment

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

The solution is very simple, on every page you are leaving 5 columns on the left and 5 columns on the right blank, so all you need to do given you want a narrow design is to change the site width to ~860px and then redesign the pages to use all 24 columns. This will bring the navigation inline with the content and have the added benefit of making your website look better on narrow screens.

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

Thank you for your reply. 

I wan to keep the same size as it is  for body page  leaving 5 columns on the left and 5 columns on the right blank.

I just want to chainage the padding for header. 

Can you tell me how ?

Edited by YOUYOU123
Link to comment
14 minutes ago, YOUYOU123 said:

I wan to keep the same size as it is  for body page  leaving 5 columns on the left and 5 columns on the right blank.

For what purpose? Site side padding or margin values are much better than leaving blank columns.

15 minutes ago, YOUYOU123 said:

I just want to change the padding for header. 

You can do that, I'll give you some Custom CSS, but because the 5 columns vary in width based on screen-size the code won't work very consistently, the solution I gave you would keep your website looking identical, and working perfectly for the header:

.header .header-announcement-bar-wrapper {
    padding-left: 18vw;
    padding-right: 18vw;
}

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
30 minutes ago, YOUYOU123 said:

so Do I need to change the page width (Max) : 860 PX here ?

Yes.

(860px was based on your content, you may decide that 900px or 800px is better for your design)

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.