Store Link: https://c626db-2.myshopify.com/
Pass: door
Can anyone please help me with my shopify theme header? The problem is that the header isnt responsive on any of the devices. Like in tablet or mobile devices this is how it should look
and this is how it is
can anyone please help me with how to fix it? Thanks!
Hi @Boliye
Go to your Online store > Themes > Edit code > Assets, open base.css file, add this code at the bottom and save file
@media (max-width: 767px){
.header .header-row {
display: flex !important;
justify-content: space-between;
}
}
Hi @Boliye ,
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Help With Header, let’s try this solution:
Online Store ->Theme ->Edit code-> theme.liquid
I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly
Thanks Theodore! Can you please help in fixing the distance of the search icon and the cart icon on mobile/tablet devices? They are quite near and looking odd. Thanks!
Hi @Boliye
Check this one.
@media screen and (max-width: 750px){
.header__icons {
gap: 15px;
}
}
And Save.
Result:
Note: You can increase/decrease the gap sizes.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you bro! And can you please give an equal distance to the icons, like the search and wishlist and cart? And please remove the wishlist icon for the mobile view? Thanks a lot bro! And equal distance from the menu button too. You can see the screenshot below of an ipad pro. You can see its not equally distance from each other. Thanks! 
Check this one.
Same Instruction.
@media only screen and (max-width:749px){
a.header__icon.header__icon--wishlist.link {
display: none;
}
}
@media screen and (max-width: 1449px){
a.header__icon:not(:last-child) {
margin-left: 0rem !important;
}
}
.header__icons {
gap: 10px;
}
details-modal.header__search.search-box-hide {
padding-left: 10px;
}
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you ! Really appreciate your help!
Welcome, Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Bro if you don’t mind would you help me with the CSS of this mobile menu? You can see in the image below that there is too much white space below the wishlist button and adding more pages pushes the login icon and the social media icons below the page, where they aren’t visible anymore, Can you please help me so that the login icon and social media icons are always visible even when pages in the menu are so much that they touch the login icon. Obviously there won’t be a lot of pages but just saying for reference. I just don’t want the login icon and social media icons to push down. Thanks!
The reason behind this are this code.
The solution I can think,
1st find this code in the component-menu-drawer.css in the Asset file and put some comment sign. like this.
Or paste this code in your base. css
.js .menu-drawer {
height: unset;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thanks, I tried the code but now the menu looks a bit off, as I don’t want to reduce the size of the menu drawer. I want it to be full page. Could this be applied in a way that the menu drawer is full page while social media icons are visible too? Thank you!
Is it possible to do the solution I mentioned above? Would love to here back from you. Thanks!
