How can I make my theme header responsive on all devices?

[Boliye]

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!

[Made4uo-Ribe · Accepted solution]

Hi @Boliye 

Check this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@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!

[Dan-From-Ryviu]

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;
}
}

[PageFly-Theodor]

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

<style>
.header .header-row{
	display: flex !important;
    justify-content: space-around !important;
}
</style>

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

[Boliye]

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!

[Made4uo-Ribe · Accepted solution]

Hi @Boliye 

Check this one. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Actions" and then "Edit code".
• In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@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!

[Boliye]

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! ❤️

 

[Made4uo-Ribe · Accepted solution]

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!

[Boliye]

Thank you❤️! Really appreciate your help!

[Made4uo-Ribe]

Welcome, Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Boliye]

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!

[Made4uo-Ribe]

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!

[Boliye]

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!

[Boliye]

Is it possible to do the solution I mentioned above? Would love to here back from you. Thanks!