Home/ Questions/Q 8611425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T04:22:23+00:00

My objectives are: full screen sidebar menu, and content when resized to mobile, menu

  • 0

My objectives are:

  • full screen
  • sidebar menu, and content
  • when resized to mobile, menu on top, rest below
  • thats it

I liked the Foundation grid. But I’ve found no ‘legit’ way to do that.

Is it possible, or what grid framework would you advise for that?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Sounds like all you really need is:

    <body>
    <div id="navbar">...</div>
    <div id="content">...</div>
</body>

    CSS:

    #navbar {
    position: fixed; 
    left: 0; top: 0; bottom: 0;
    width: 150px;
    overflow: auto;
}
#content {margin-left: 150px;}
@media all and (max-width: 480px) {
    #navbar {
        bottom: auto; right: 0;
        height: 150px;
        overflow: auto;
    }
    #content {margin-left: 0; margin-top: 150px;}
}

    Alternatively, have two navbars (one for normal devices, one for mobile) and just show/hide them using the media query.

    • 0