Fixed static sidebar and menu help (bootstrap)

Hi everyone, It has been a very long time since working with web design, so I am struggling quite a bit and have deadlines coming up so any help or direction here would be greatly appreciated.

I am trying to use Bootstrap 4 to achieve the following but can’t make any headway.

I need a sidebar running on the left with full height on the left and a ‘hamburger menu at the top’.
When the hamburger menu is clicked a menu needs to slide to the right of that bar and show the menu options without moving any content.

The header also needs to remain fixed.

Can anyone please assist?


Usually we ask people to post what they’ve tried so that we can see they are making an effort to learn. If you can post a demo or codepen then we can try and point you in the right direction.

I do actually have a boottsrap4 codepen from another question which was similar so I have modified it to your requirements.

There are probably better ways to do this as I don’t use bootstrap any more as it is usually easier to code from scratch.

Hopefully it will give you some pointers and put you on the right track.

1 Like

Hi @PaulOB , thank you so much for the codepen and adjustments you made to relate to my requirements. There honestly isn’t enough words to thank you - this has put me on a path to a workable solution which has eased my burden tremendously.

Yes I can understand that it looks like I did not put any work in, I actually did, but couldn’t get anywhere. I have put in countless hours and just couldn’t figure it out .This was the last attempt I had made:

But once I realized I was now going to have to attempt to plug a hamurgerpicker in the top left and then try and hack my way to sliding a div into view, I knew I was just making a mess and going down the wrong path.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.