Grow your CSS skills. Land your dream job.

Sticky Menu

  • # November 7, 2012 at 2:07 pm

    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.

    # November 7, 2012 at 2:25 pm

    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;
    }

    # November 7, 2012 at 2:30 pm

    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!

    # November 7, 2012 at 2:32 pm

    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.

    # November 7, 2012 at 2:33 pm

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".