Mobile menu style


#1

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!


#2

Hello there,

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

Regards,
Kharis


#3

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?


#4

Hello there,

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

Regards,
Kharis


#5

#6

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


#7

perfect thanks Kharis


#8

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