SideNav: 'push in' desktop, 'overlay' mobile

[Dyd]

Here’s what i want to achieve: https://i.stack.imgur.com/cDw8U.png
Here’s what i got so far: https://codepen.io/dyd666/pen/wpJjKq

It’s pushing in on desktop but not ‘overlaying’ on mobile. How can i do that?

Thanks ; )

[Beverleyh]

To overlay, null/don’t use the left margin here;

#secret-checkbox:checked ~ .content{
  margin-left: 150px;
}

You’ll need to use a media query to change the behaviour at whatever mobile/desktop threshold you see fit.

[Dyd]

Cool, now it works.
Only problem: the side nav is coming from left to right even on mobile.
How can i make it appear from top to bottom?

Thanks

[Beverleyh]

Think about it logically by looking at what’s already there; if a change in left values cause the menu to move sideways/horizontally when the checkbox is checked/unchecked, have a play around with top values to see how that affects the movement vertically.

[Author]

Posts