Mobile Navigation - Center Icon Below Logo

[SE1217707]

is there a way to center the mobile navigation below the logo? Right now it is justified left

[ruenel]

Hey @SE1217707,

Thanks for writing in!

You want something like this?

You will need custom CSS for that. Using your browser’s Development Tool, you can check the live HTML code and find which CSS selector you need to use or what CSS code has been used to style the page.

Check out this video demonstration:
https://www.youtube.com/watch?v=EY3CCMWD67o

You may also check out these old threads which has custom CSS the modifies the mobile Nav button
https://theme.co/forum/search?q=.masthead-inline%20.x-btn-navbar

Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Best Regards.

[SE1217707]

Can you look into this more - I have created other websites without doing what the video shows and was able to have the navigation centered on mobile. It has been a bit and I can’t recall what I did for the prior sites, but I definitely didn’t do what the video shows. There has to be an alternative method.

[tristup]

Hi @SE1217707,

To align the Hamburger menu in the center you need to add some custom CSS, which is beyond the scope of our Theme Support. I would suggest you hire a developer who can assist you with the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.
Alternatively, you can go through the following thread with a similar topic.

Center Mobile Nav Bar Button

Hello There, Thanks for writing in! To resolve your issue, please remove this css block first: @media screen and (max-width: 979px) { .masthead-inline .x-btn-navbar { float: left !important; } } You will need to replace it with this code instead: @media(max-width: 767px){ .x-navbar { text-align: center; } .masthead-inline .x-btn-navbar { float: none !important; display: inline-block; } } We would loved to know if this has work for you. Thank …

Please remember that the above code will work if copied as it is and doesn’t conflict with any existing style.
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 really do not provide support for custom codes which means we can’t fix it in case it conflicts with something on your site nor will we enhance it. Further customization should be directed to a third-party developer or you can avail of One, where we answer the questions beyond normal theme support.

Thanks

[SE1217707]

how can I decrease the size of the logo on mobile then?

[tristup]

Hi @SE1217707,

To decrease the logo size only on the mobile or smaller screens, you need to add the custom CSS that adjusts the size on the specific screen sizes. If you are not proficient in that, I would suggest you hire a developer who can assist you with the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks