Changing the height in my off-canvas menu causes horizontal scrolling

Question

I've got an off-canvas menu, and it's working very well for my Mobile layout.

However, when I expand the menu item to show the submenus under it, the whole page can scroll horizontally. Not so perfect.

I'm just controlling the class name to display: block.

http://dev.martinilab.com/so1/index.html

I'm not sure what is causing the problem.

Answer 1

The problem is that you don't have a height set on .row , so it's as tall as the content forces it to be. When you display:block that class and cause those menu items to be displayed, it forces the content further down, and since the page is as tall as the content, the page gets longer.

If you want to fix it, either set a height for that class or take those menu items out of the document flow so it doesn't push the content down.