Sticky Menu

[Chesskuh]

I am trying to get the menu to stick at the top of my page here…
http://overloadd.wastedd.net/test2/

As you can see when you scroll the image on the left stays put. I would like the Menu bar at the top to stick to the top of the screen, so when you scroll only the right side (content) scrolls. Until you get to the bottom when the footer is revealed.

[pmac627]

I just used firezilla to play around with it but the following got what you desired. Add these (or change these) values in the two rules.

#menu-wrapper {
position: fixed;
z-index: 9999;
}

.content {
top: 53px;
}

[Chesskuh]

Hey, thank you so much! That is brilliant! Could you explain the z-index for me? I might aswell learn something new whilst I am here, not just the solution, I may be able to solve it myself next time :)

Thanks again!

[pmac627]

z-index is just a third dimension to align the element by. Think of it as distance from the the screen/behind the screen. By setting the z-index higher than everything else, it essentially tells the element to float overtop it, rather than trying to fight for space between other elements.

Try making those changes without the z-index and you’ll see your menu get squeeze between the left image and the content.

I’m sure someone else could give you a far better explanation.

[Chesskuh]

No thats perfect, I understand :) Thank you for all your help! And teaching me something new!

[Author]

Posts