Moving Burger Menu up On mobile

Support
#1

How can I move My burger menu closer to the top same line as logo for mobile devices?

#2

Hello @rotation,

Thanks for writing in!

You are encountering this issue because you have set the logo image to 70%. You will have to add this custom css in your child theme’s style.css file

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

You can go to X > Theme Options > Header > Logo - Alignment and adjust the “Navbar Top Logo Alignment”.

Hope this helps.

#3

Not totally inline, What should I adjust?

#4

Hi @rotation,

Your site header is set to be inline to begin with.

This issue is happening because your logo is taking up the entire width of the header, there is no room left for the mobile menu so it wraps below.



To resolve that you need to reduce the width of your logo on smaller screen (mobile view), that is the CSS code for provided by Ruenel.

max-width: 75%; will work better though because it will automatically respond to the width of the screen.

Then to adjust the vertical positioning of the mobile menu to center it with the logo, please navigate to Theme Options > Header and adjust the MOBILE NAVBAR BUTTON ALIGNMENT



Hope it helps,
Cheers!

#5

I cant seem to get it inline or the logo area is too big I move my mouse over it and it is too big how can i make this work ?I moved the logo over to the left and still the burger menu will not line up!

Take a look at the site on mobile seems to be a lot of room

#6

Hello @rotation,

Your logo is still too wide. Well anyway, to finally resolve this, please use this custom css instead:

#x-btn-navbar {
    box-shadow: none;
    position: absolute;
    right: 10px;
    top: 5px;
}

We would love to know if this has worked for you. Thank you.

#7

That worked 100% Thanks

#8

You’re most welcome!
We really appreciate for letting us know that it has worked for you.

#9

Ok same topic: How can I move this logo to the center more its much too far to the left on mobile and desktop?

#10

Hello @rotation,

To move the logo image to the right, please have your code updated and use this instead:

@media (max-width: 700px){
    .x-brand {
        max-width: 360px;
    }

    .x-brand img { 
        margin-left: 20px;
    }   
}

We would love to know if this has worked for you. Thank you.

#11

It moved the logo off the left side some space now, Is not a way to just center the logo? It really seems that there is too much space between the burger menu and the logo on mobile.

#12

Hi @rotation,

In that case, please replace that CSS with this

@media ( max-width: 767px ) {
.x-brand {
    display: block !important;
    float: none !important;
    margin: 0 auto !important;
    text-align: center;
}
.x-btn-navbar {
    margin-top: 3px;
    position: absolute;
    right: 5px;
    top: 6px;
}
}

It will be centered, but may not appear so due to mobile menu.

Thanks!

#13

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