Enabling mobile menu is easier. You can see a block of code from line number 103 to 117 in css/responsive.css which starts and ends like this –
#primary-menu { display: none; }
......
......
#mobile-menu-toggle { display: block; position: absolute; top: 30px; right: 0; height: 22px; width: 24px; padding: 5px; border: 2px solid #bbb; }
MOVE that whole chunk of code to line number 40 inside the block –
@media only screen and (max-width: 1100px) {
…
}
If you do not want to mess with the responsive.css file, you can copy this piece of code to Custom CSS tab or custom.css file and wrap it with the required media query
@media only screen and (max-width: 1100px) {
#primary-menu { display: none; }
......
.......
#mobile-menu-toggle { display: block; position: absolute; top: 30px; right: 0; height: 22px; width: 24px; padding: 5px; border: 2px solid #bbb; }
}
Sorry – this task could have been easier if we had these pieces in style.css itself but for performance reasons (to avoid processing these styles in desktop browsers), we had to have it in responsive.css under respective media query block.