Stacked desktop menu, inline mobile menu

Hi there,

On desktop, I have my logo centered among the menu items and set to stacked (according to solution provided here: https://theme.co/apex/forum/t/center-logo-in-header-of-education-demo-on-same-line-as-menu/34009/4). However when I go to mobile, my logo is now above the hamburger. How can I change this so that in mobile, the logo and nav are inline next to each other?

My site is: dev.amorarmt.com

Thanks.

Hi @coracle,

I am not sure what CSS code you used to make the desktop mode look like that but you will need to limit that portion of code to only desktop mode.

So you wrap the whole code inside:

@media (min-width: 980px) {
/* Add the custom code here */
}

By wrapping your code inside the section above you will force whatever customization you have only for desktop and not the mobile, thus, you will have an inline mobile menu with the logo.

Thank you.

Hi @christoper.amirian,

I had followed your instructions here: https://theme.co/apex/forum/t/how-to-place-logo-in-the-center-of-the-menu/7600/2. I ended up switching the desktop setting back to inline and using media queries as you suggested to hide the logo and center the nav. Thanks!

If you need anything else please let us know.

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