This might help on making the sidebar work well on smaller screens (even phones):
http://liveweave.com/KmNVd7 I tried to simplify the code as much as possible. Check out what it does at different widths! At anything above a certain size, the menu toggle won't appear at all. At smaller widths, the menu can be collapsed with it. How you manage your space vertically within the sidebar is up to you.
With that in mind, it'd be easy to change the height of any header you included to be shorter on mobile devices. I've colored the space for the header and wrote a note by it in the css. If you make a copy of it in the section for smaller screen widths, and change the height, then you'll be able to have something mobile-friendly. ^^