Keep menu hamburger on same line as logo in logo but menu disappears

[heatherbl4ck]

Hello,

In mobile, trying to make the menu hamburger icon not drop to next line underneath logo, I added the following code. It appears to work, however when one toggles the menu, the menu items are off screen and look funky! Please help!

I added this code from another forum thread:

    @media (max-width: 480px) {
    .x-navbar-inner .x-container {
        display: flex;
        flex-flow: row;
        justify-content: space-around;
    }

    .x-navbar-inner .x-container .x-btn-navbar {
        margin-left: 15px;
    }
}

[ruenel]

Hello Heather,

Thanks for writing in!

To resolve your issue, please remove your custom code first. You will need to replace it with this code instead:

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

This code will set a maximum width for your image so that the menu will not fall down to the next column. This should give you this kind of look:

Hope this helps.

[heatherbl4ck]

You all really are rockstars! T H A N K Y O U!

[nabeel]

Glad we could help.

Cheers!