Hey there!
I have a problem getting the mobile top/menu bar looking the same as it should look like on desktop version. I’ve noticed the one on mobile is a bit weirdly placed, where it should be lower and also the placing of the search icon should be next to the other icons (acc, cart), like it is on the desktop version. I notice this won’t work because the logo wants to be in the middle, but i would also like the logo to be on the left, like on desktop version.
I am very new to this whole shopify thing and I can’t really figure it out with all the codes yet. Hope someone has time to help me with this (hopefully) small issue! I am using the ‘Fabric’ theme for the website. Thanks in regard!
Website name: field-house.org
(it’s not up and running yet, since these changes still have to be made. Hopefully you’ll be able to get in)
See attached images:
first is desktop (how it should look)
second is mobile (wrong look, should be like desktop)
1 Like
Hey @fieldhouse2025,
I can see exactly what you’re trying to achieve - you want the mobile header to match your desktop layout with the logo on the left and all the icons (search, account, cart) grouped together on the right. This is definitely doable with some custom CSS for the Fabric theme.
Try adding this CSS code to fix your mobile header layout:
Step 1: Go to your Shopify admin
- Online Store > Themes > Actions > Edit Code
- Find Assets > base.css (or theme.css) and add this code at the bottom:
/* Mobile header layout - make it match desktop */
@media screen and (max-width: 749px) {
.header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 10px 15px !important;
}
/* Logo positioning - move to left */
.header__heading {
order: 1 !important;
flex: 0 0 auto !important;
margin: 0 !important;
position: relative !important;
left: 0 !important;
}
/* Group all icons together on the right */
.header__icons {
order: 3 !important;
display: flex !important;
gap: 10px !important;
align-items: center !important;
}
/* Make sure search icon is with other icons */
.header__search {
order: 2 !important;
margin: 0 !important;
}
/* Hide mobile menu button if you want clean look */
.header__icon--menu {
order: 0 !important;
}
/* Ensure proper spacing */
.header__icon {
margin: 0 !important;
padding: 5px !important;
}
}
Alternative approach if the above doesn’t work perfectly:
@media screen and (max-width: 749px) {
.header {
display: grid !important;
grid-template-columns: 1fr auto !important;
align-items: center !important;
gap: 15px !important;
padding: 10px 15px !important;
}
.header__heading {
grid-column: 1 !important;
justify-self: start !important;
margin: 0 !important;
}
.header__icons {
grid-column: 2 !important;
display: flex !important;
gap: 8px !important;
align-items: center !important;
}
}
This should give you the exact layout you’re looking for - logo on the left, all icons grouped together on the right, just like your desktop version. The key is using flexbox or grid to control the positioning and making sure the icons stay grouped together.
Let me know if this works or if you need any adjustments to the spacing!
Cheers!
Shubham | Untechnickle
Hi @fieldhouse2025 ,
You’ve provided your website URL, could you also share the password so I can understand it better and provide you with an easy code solution?
Thanks!
Hey there!
Bit late on the response, apoligize for that, holidays got in the way :).
Thanks for getting back to me so quickly!
I tried the first code you sent, which actually worked out pretty well. The spacing that was a bit bugged it fixed now (see image), but the logo still wants to stay in the middle (it’s feeling comfortable there i reckon) and the search icon isn’t ready to bond with the other guys on the right (it’s also a bit off to the right for some reason).
Hopefully you’ll have little time to help me resolve that issue finally! Do you need the password to get in and look at the code perhaps?
Thanks again in regard! Looking forward to your wizardry 
PS: don’t worry about the big text in the middle that’s missing, i changed that around a bit 
