[Solved] Mobile Navigation

[SilverSerpent]

Here you can see a pen in which I have a dropdown menu which I want to be off screen and then drop down when the user clicks the green button. I have most of this working; my only question is, how do I get the ul to position itself so that its bottom lines up with the top of the body? I know it must be a percentage thing, but I can’t figure out how to do it. Any thoughts? I could do it with jQuery, I’d just rather keep this all within CSS if there’s a way.

[Paulie_D]

You should just be able to set the top position of the ul to top: -100%

[SilverSerpent]

I’ve tried that but that changes according to the height of the page. To see this, shrink the height of the view so that it’s only about 150px tall and then you can start to see the ul peek out. And upon sizing it back up you can tell that it goes up much higher than intended.

Edit: The problem is that it is using 100% of the document height, effectively putting the top at twice the height of the page, whereas what I need is 100% the height of the page plus 100% the height of the ul, which is what I’m not sure how to figure out.

Edit 2: I’ve sort of got it working by setting it to top: 0; and z-index: -9999; and then when it’s toggled the body top padding increases and since there’s nothing in the way anymore the navigation is revealed. It’s not quite what I was going for but it’s close enough so I’m gonna call this one solved.

[Author]

Posts