The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Multi Level Off canvas nav with only CSS

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #200970

    I’m a bit new to the more advanced aspects of CSS and am trying to build a multi-level off canvas nav structure for a site I’m working on. I’ve gotten pretty far using Chris’s tutorial on this site, but I’ve hit a few road blocks. First, I’d like the page wrapper to stay slid to the right when activating sub menus instead of sliding back under the nav. Second, I’d like the sub menus to retract and reveal the main menu, rather than retreating entirely. Any advice would be great, I’m trying to do this all with CSS and no JS, if possible. Thanks. Here’s the link to CodePen. It’s not really styled, I’m just trying to get the functionality to work first.


    There’s a couple here for you to go at:

    If you want the off-canvass/hamburger combo at all times (on desktop and mobile), the bottom one would be the one to go for.

    But if you want a more traditional dropdown/flyout on desktop, the three at the top offer few different variations.

    Hope they help


    These are very nice and a great resource. I was hoping that someone might be able to offer some insight to my question given the provided pen. I’d love to know what I need to add to accomplish the subtle changes I was hoping for. Thank you for the response.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.