[Solved] Page Header Fixed While Content Scrolls Below…

[Historical Forums User]

I’ve looked around and found some examples of how to do this, but I can’t quite figure out how to implement it on the Squarespace template I’m testing out.

Here is an example page (not my site, but uses the same template so the code would be the same):
http://mariel-osborn.squarespace.com

What I would like is for the header to always remain at the top of the screen and have the content scroll below it.

I can’t edit .css files directly but there is a “custom css code” section where I can put new code in.

Thanks!

[Paulie_D]

Firstly, you have to be sure that SqSp will let you do that.

Then decide which element (probably a wrapping div) you want to stay fixed.

Something like

<div id="headerWrapper">

Then your custom CSS would something like

'#"headerWrapper {
position:fixed;
width:100%;
top:0;
height: whatever 
}

This will cause your content to move up the page as the header is now ‘out of the flow’ so you need to add some margin-top to the body equal to the height of the header so push it back.

Those are the basics but a lot will depend on the actual site.

[Historical Forums User]

Thanks!

I’ve temporarily enabled the template on my site for testing and so it can be seen here. Here is the link:
http://jeffsingerphotography.com/

This is what I put into the custom CSS code:

#headerWrapper {
position:fixed;
width:94%;
top: 30px;
height: 100px;
}

Two problems

• I’m not sure what the height variable is doing since it’s not changing anything when I try different values. I’m guessing this is why the image thumbnails are up all the way to the top rather than below the header.

• When I scroll, the “back header background” doesn’t stay fixed and only the text stays at the top… all the content scrolls behind the text. I need to to scroll behind the text and the “black header background”.

Thanks!

[Paulie_D]

Actually you had a height of minus 100 px.

You hadn’t set a background color either.

Try this:

#headerWrapper {
position: fixed;
width: 94%;
left: 3%; /* so it centers given the width you've used*/
height: 100px;
top: 30px;
background: black;
}

Also you’ll need to apply this to the body CSS

margin-top: 130px; /* header height + top offset */

[Historical Forums User]

Thanks!

So, except for the top of the thumbnails, things are where they should be with this:
#headerWrapper {
position: fixed;
width: 96.2%;
left: 1.9%; /* so it centers given the width you’ve used*/
height: 100px;
top: 30px;
background: #1a1a1a;
}

I did this and it scrolled and the background was there as it should be. But the top spacing was still off.

As soon as I added this to the top of the custom CSS box:
margin-top: 130px;

The thumbnails went to where they should be but the scrolling stopped working.

[Paulie_D]

As soon as I added this to the top of the custom CSS box:
margin-top: 130px;

Did you add that to the body styling?

[Historical Forums User]

I’m not sure that I can do that… I only have a “custom css” box where I can add CSS code. I don’t have access to actual html or css files with Squarespace.

[Historical Forums User]

I can also add to the html “header” and “footer”, but not body.

[Paulie_D]

body {
margin-top:130px
}

If you can add CSS to your header div you should be able to add CSS to the body

[Historical Forums User]

Is the #canvas or #canvas wrapper something that can be moved without effecting the header?

Also, just curios why you used #headerWrapper and not just #header?

it seems like this does the same thing:
#header {
position: fixed;
width: 96.2%;
left: 1.9%;
height: 100px;
top: 30px;
background: #1a1a1a;
}

Thanks!

[Paulie_D]

I have no idea what the #canvas does, you asked about the header.

It made sense to me to grab the item that wrapped the header.

But if you’re happy with it….go with it.

[Historical Forums User]

I was just curious… But I think I figured it all out thanks to your help. I actually ended up needing both #header and #headerWrapper. This was what I came up with to get everything where it needed to be (may need some fine tuning for exact placement):

#headerWrapper {
position: fixed;
width: 96.2%;
left: 1.9%; /* so it centers given the width you’ve used*/
height: 150px;
top: 0px;
background: #1a1a1a;
}

/* With the above, I needed to move the logo and menu down /
#header {
position: fixed;
width: 96.2%;
left: 1.9%; / so it centers given the width you’ve used*/
top: 30px;
background: #1a1a1a;
}

/* This moves the content down to be below the header */
#pageWrapper {
top: 140px;
position: relative;
}

Thanks!

[Author]

Posts