Mobile menu style

Hi

I would like to change the mobile menu from:

to this:

If it’s not clear, I’d like to keep the menu style on say an iPad on all mobile devices/lower resolutions rather than have the logo with menu icon below it.

Hoping you can help, cheers!

Hello there,

Please try this solution. Let me know if you have further questions.

Regards,
Kharis

Yes, Kharis, worked perfectly with a little fiddling about, thanks!

The menu icon seems to move around depending on the browser width. See the pics for what I mean. Any way to keep its position fixed?

Hello there,

Share a link to your site, please, so I can get the exact code to suggest.

Regards,
Kharis

www.coachingenglishonline.com

Hello there,

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

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

      .btn-menu {
        margin-top: 0;
      }

      .site-header .container {
        position: relative;
      }

      .site-header .container .col-md-8 {
        position: absolute;
        top: 0;
        margin-top: 0;
      }
      
    }

    @media only screen and (max-width: 479px) {
      #mainnav-mobi {
        top: 40px;
      }
    }

Regards,
Kharis

perfect thanks Kharis

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