How to get Menu and header to not scroll?

HTML & CSS
1

Hello there,

I’m working on this site: www.scotbarchitects.com/profile How might I be able to get the menu and logo in the header to not scroll when looking at the body of text?

I didn’t mess with it quite yet, I didn’t want to mess up my CSS. I’d rather do it the right the first time.

Thanks,
Lorne

2

You could try this:

header .logo, header .plus-menu {
  position: fixed;
}

Put that at the end of your style sheet as an experiment, and see if you like the result.

3

That’s what I want, however is there a way to have it so it doesn’t overlap? Basically a cutoff point where the content just disappears? Or just have a scrollbar in the content so that div doesn’t move and any overflow is a scrollbar just in that div?

Thanks Ralph,
Lorne

4

You could put those fixed elements in a fixed header section with a dark background, for example, and have the content slide under it, but it’s tricky with the current setup—a full page background image. There would need to be some compromises.

Personally, though, I think it’s better to leave it the way it is. People are used to scrolling, and this standard layout is more reliable across devices.

5

In the layout I’m currently working with the header is fixed on the larger screens only. You do NOT want a fixed header on a phone layout, so if you do this trick be prepared to combine it with media queries for best effect.

Looking at your current layout, your header being transparent is going to be a problem. You’re going to need to “cut” your header body copy of the background image widthwise. You don’t actually need to cut the image, but you will need to reference it twice. The body copy will need to be offset by the width of the header. I think this will be seemless. Then, your text can go underneath the background of the header image and appear to disappear into nothing.

I’m tempted to try it just for the challenge, but I’m also pretty certain it will take a good six hours for me to get it to work.

6

Thanks for the replies. I think I’ll stick with a moving header for this circumstance. Michael feel free to give it a shot, but it’s not necessary.

haha, thanks,
Lorne