Shopify themes, liquid, logos, and UX
Hi, the menu of my store only appears in the Desktop version. When I switch to the mobile version, the menu hides. Could someone please help me? I'm attaching photos.
Also if someone can tell how can I put my logo to the left and put the menu to the right in the same line as the logo, it would be of great help (only necessary in the Desktop version).
Solved! Go to the solution
This is an accepted solution.
Hi @enriquegarcia,
Currently, the css on header is squishing the logo off to the side
Changing the css to this:
.header {
display: flex;
flex-direction: column;
align-items: center;
}
Will give you this:
Then, to keep the menu items centered (currently left-aligned on smaller screen sizes), edit your (index) file:
(around line 519)
From:
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
}
To:
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
justify-content:center
}
Hope this helps!
Hi @enriquegarcia!
I’d need to take a closer look at your site to help solve this. Could you share your store's password?
To change the position of your logo to the left and your menu to the right on desktop, select Middle Left from the Desktop logo position drop down.
From:
To:
Hope this helps!
Hi! The site is imgarsa.com and the password is teti
In your css.base file, the navigation is set to display:none; for mobile screen size.
Setting display to block will make it visible.
/* Header menu */
.header__inline-menu {
margin-left: -1.2rem;
grid-area: navigation;
display: block;
}
Let me know if you need any more details!
It works! But the logo dissappears when I switch to mobile, could you please tell me how to make the logo visible in Mobile Version?
Could you please solve my other doubt.
This is an accepted solution.
Hi @enriquegarcia,
Currently, the css on header is squishing the logo off to the side
Changing the css to this:
.header {
display: flex;
flex-direction: column;
align-items: center;
}
Will give you this:
Then, to keep the menu items centered (currently left-aligned on smaller screen sizes), edit your (index) file:
(around line 519)
From:
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
}
To:
.list-menu--inline {
display: inline-flex;
flex-wrap: wrap;
justify-content:center
}
Hope this helps!
Thank you very much!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025