ben03 Posted March 5, 2018 Share Posted March 5, 2018 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; background-color:$dark-blue; 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 Thanks Link to comment Share on other sites More sharing options...
dsonesuk Posted March 5, 2018 Share Posted March 5, 2018 Unless you give min-height to content container to show all of menu content, you will always have this problem. Link to comment Share on other sites More sharing options...
ben03 Posted March 7, 2018 Author Share Posted March 7, 2018 Ah good shout, Thanks for your help on this. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now