Menu hamburger icon dropping below logo on mobile

[RocktheHouse1876]

Hello,

Would there be a way to resize the logo, so that when one views the website on a iPhone SE for instance, that the menu button doesn’t fall to the next line, so that the logo resizes and the menu button stays in right corner always?

When I view in the different mobile modes on my computer, it would appear this is happening. However, when I view the site on my phone (iPhone SE) the menu button has dropped to the line below the logo.

I have not been able to find a solution. Thanks for your help!

[jade]

Hi there,

Please add this code in X > Theme Options > CSS:

@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;
    }
}

Here are some related links of the suggestions above for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa
• CSS Media Queries - https://goo.gl/L3ZHNg
• CSS Flex - https://goo.gl/S2Ncde

Hope this helps.

[RocktheHouse1876]

Thank you!! That solves the problem, but seems to creates another…See Screenshot Here

I’ve since removed the code, after I saw this.

What are your thoughts?

[jade]

Hi there,

Please try this instead:

@media (max-width: 480px) {
    .x-brand {
        width: 70%;
        display: inline-block;
    }

    .x-navbar-inner .x-container .x-btn-navbar {
        width: 16%;
        float: right;
    }
}

Hope this helps.

[RocktheHouse1876]

Thank you JADE! Brilliant!

[Prasant]

You are most welcome.