Shopify themes, liquid, logos, and UX
Hi there!
I'm really struggling on centering my logo and evenly spacing the menu items on my desktop view.
Can anyone please help?
Thank you so much!!
pass: chaort
Hi @isameloc ,
As your requirement, you can try my solution by fixing CSS in your theme:
Hope the result below is as you want:
In your menu header there are 4 classes:
- header__inline-menu-left
- header__inline-menu-right
- header__heading (logo)
- header__icons
I added the order property in the correct ascending order from 0 -> 3 to realign the position of the classes, and also added some other css properties to make it more well-proportioned.
You can do this in admin.shopify:
Sale channels => Online store => Theme => Edit code. Search base.css and insert the css at the end of the file:
.header.header--middle-center.header--mobile-center.page-width.header--has-menu { display: flex; justify-content: space-between; justify-items: center; } .header__inline-menu.header__inline-menu-left { order: 0; } .header__heading { display: block; margin: 0 auto; order: 1; } .header__inline-menu.header__inline-menu-right { order: 2; } .header__icons { order: 3; }
Hope it helps!
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
B2B Solution & Custom Pricing | Product Labels by BSS
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hi @BBS-Commerce,
Thank you so much for your help.
Your solution is closer to what I envisioned but I need it to be more like this:
- the logo should be centered with the page (not the male model picture)
- The menu items more spaced between them and evenly distributed on the box.
Can you please help?
Thank you so much!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024