Mobile menu hamburger aligning vertically with the site logo

Support
#1

I added some code to adjust my mobile menu to align vertically center with my site logo but it 's not working all the way its ok when i look out in chrome in my iphone emulator but not on my real iphone 7 8 or X.

#2

Hi There,

Thanks for writing in!

Please add this CSS to your Theme Option -> CSS and let us know if that works.

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
    margin-top: 40px !important;
}

Hope this helps!

#3

HI this is erroring and missing a }
I added in and still not working
looks ok in chrome responsive but not on the phone looks the same

@media (max-width: 979px) {
.masthead-inline .x-btn-navbar {
margin-top: 40px !important;
} }
Ideas?

#4

HI
so i got it working kinda i was putting the wrong custom CSS area. 2 questions… so dont’ use this area :

use this one

very confusing.

So the hamburger is on my iphone 8 vertically centered what i want
but on the iphone 7 its moved way down

can we have the logo shrink when needed?

#5

Hello There,

Thanks for updating in!

Please add the custom css in the X > Theme Options > Custom CSS section. You can find the CSS link in the left panel:

In smaller screen, the mobile menu moves down to the next row because there isn’t enough space to display inline with the logo. What we need to do is to adjust the logo image width to accommodate the mobile menu icon. To resolve that, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media(max-width: 767px){
    .x-brand img {
        max-width: 250px;
    }
}

If needed, you may reduce the width in the code above.

Hope this helps.

#6

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.