Change Header/Menu layout in Mobile version

I was able to slightly mod the menu to keep the logo in the mobile version of the menu, but the default behavior is that it stacks, and eats a lot of screen on smaller devices. My clients are engineers, and are quite insistent about their design preferences.

I would like to have a more bootstrap typical layout with the hamburger menu on the right, logo on the left, and slightly reduced, freeing up more screen space. I tried to mod the CSS and header.php to keep two columns at the XS size, but that pushed the dropdown menu nearly off the screen.

Please see attached screenshot and mockup.
Site in progress: http://www.kelses.com/wordpress/

Any guidance would be helpful.

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width:767px){

      #mainnav-mobi {
        width: calc(100% + 30px);
        width: -moz-calc(100% + 30px);
        width: -webkit-calc(100% + 30px);
        width: -o-calc(100% + 30px);
        margin-left: -30px;
      }
      
      .header-wrap .container{
        text-align: left;
      }
      
      .site-logo {
        margin-left: 0;
      }

      .header-wrap .btn-menu{
        float: right;
        margin-right: 15px;
        margin-top: -50px;
      }  
      
    } 

Regards,
Kharis

Spot on. With a tiny tweak to reduce the logo a bit, mischief managed!

Very tidy. Thank you very much!

Great!

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis