Jump to content

Recommended Posts

Hi there,

  I am trying to build an expanding sidebar menu that is absolute positioned to the left of the screen and spans top to bottom.

I don't want to be using fixed position, as the sidebar would have elements that would be hidden beneath the fold on mobile landscape that wouldn't be accessible. So it needs to scroll with the page content.

However when using absolute positioning, the container finishes wherever the bottom of the browser is, and is simply cut off there, which looks bad if the rest of the screen content requires scrolling.

What I am using:

.expanded-menu, .collapsed-menu {
    position: absolute;
    overflow: hidden;
    top: 0px;
    left: 0px;
    bottom: 0px;
    z-index: 5;
    @include transition (all 0.5s ease-in-out);

.collapsed-menu {
    width: 50px;

.expanded-menu {
    width: 170px;

Am not sure if this is asking the impossible, or whether the answer is staring me in the face and I've looked too long at it. Help appreciated here :)


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...