Jump to content

Reduce gap between top navigation bar/site header and content below - Bedford template

Recommended Posts

Hope someone can help!

Re-building my website in the Bryant template from the Bedford family and I'm struggling with a large gap between the bottom of the site header/horizontal nav bar and the first bit of content which sits below it (its fine on the homepage, but all other pages there's a large gap - see attached pics). Can someone advise if there's a way to reduce this gap?

Thanks!

HOMEPAGE WITHOUT GAP.png

PAGE WITH GAP.png

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

Paste the code below into your custom css area, after any other code that may already be there. 

body:not(.homepage) div#mainContent {
    margin-top: 0px !important;
}

Then tweak the margin-top value  It should affect all pages except the homepage. 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
5 hours ago, colin.irwin said:

Paste the code below into your custom css area, after any other code that may already be there. 


body:not(.homepage) div#mainContent {
    margin-top: 0px !important;
}

Then tweak the margin-top value  It should affect all pages except the homepage. 

Hi Colin,

Thanks for the response. When I paste that code in nothing at all happens. I've tried pasting it as the only bit of custom CSS in the box, tried pasting it and adjusting the px value, but nothing I do result in any visible change to the pages.

I re-building my website in a trial account to get it all right before I apply my changes to the live site, but all other custom CSS I've inputed works so can't imagine its because I'm in a trial site??

Have pasted it exactly as you have it in your message (see attached).

Am I doing something wrong??

Thanks!

CODE IN BOX.png

Link to comment

Amended code below. This should work. 

body:not(.homepage) #page {
  	padding-top: 0px !important;
}

 

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment
  • 4 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.