How to center logo and move menu selection below logo

[rkassebaum]

Say on this website on a phone. I would like to have their logo centered and then the block with the three bars which is the navigation menu under the logo. How do I make this change?

[Nodster]

in the settings for container > look for Flexbox and make this column. That should work…pretty sure an expert (ie more knowledge than my noob status will be along with a different way!!

[marc_a]

Hi @rkassebaum,

Please follow what @Nodster recommended.

@Nodster, Thanks for your help. Highly appreciated.

[rkassebaum]

Quick question. The company logo is in the header. Does the flexbox refer to the header?

[tristup]

Hi @rkassebaum,

It only possible when you are using the customized header built through the Header & Footer Builder. But as you are using the default header you can set the Logo and Navigation value to Stacked* from Theme Options > Headers > Logo and Navigation.

But if you want it to be shown only in the mobile devices, you need to add some custom CSS code into the Theme Options > CSS to achieve that.

@media  (max-width: 480px) 
{    
    .x-navbar-inner .x-container
    {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}

You may need to adjust the breakpoints as per your need. You can find the details on the custom media query breakpoints: https://medium.com/@uiuxlab/the-most-used-responsive-breakpoints-in-2017-of-mine-9588e9bd3a8a
And if you are not proficient with the coding, I would suggest you hire a developer who can assist you to do the customization.

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing code.
Please note that the code provided serves only as a guide to help you get started custom coding on your own if there’s no option offered in our theme or the products we bundle.
We do not provide support for custom codes that means we can’t fix it in case it conflicts with something on your site nor will we enhance it.

Thanks