Setting Header to Fixed Position

[Eric Rosas]

What would be the best way to code in the header as a fixed menu? That is, when the user scrolls down the page the header(logo, menu items, header background image) stays fixed at the top of the screen as the content scrolls down. I tried the usual way to do this, but the slideshow kept covering the header, thoughts?

[Bill Robbins]

Eric,

Interesting idea. I haven’t tried that with Bottega before but you should be able to do it. Go to the Theme Options page and select the Styling tab. Scroll down to the Custom CSS box and paste this:

#wrap {
	margin-top: 0;
}

#header {
	position: fixed;
	width: 960px;
	z-index: 2000;
}

#home-media {
	padding-top: 99px;
}


#content,
#sidebar {
	padding-top: 115px;
}

With the demo, that will move the site’s content up to the top of the screen so nothing appears again on top of the header. It’ll also move it to the top from a layer perspective so items won’t be on top of it anymore.

The padding in the next two styles is to move the content down so it’s below the header and not covered up by it before the user scrolls. You’ll probably need to change those values a bit to match your site.

If you run into any questions or trouble, let me know.

Enjoy your week,
Bill

[Eric Rosas]

That worked excellently, thank you sir!

[Bill Robbins]

Fantastic. If you need anything else, let me know.

[Author]

Posts