Solved

How can I adjust a two-floor header to a single line on mobile?

HoHoHo42
Visitor
2 0 0

Hi, i'm the owner of the page Hohoho.ws and everuthing starts looking fine on pc but on mobile i have a two floor header which looks preatty bad.

Is there any way to make that two floor compressed header change to a line just on mobile?

Thanks in advance to everyone trying to help!

Accepted Solutions (2)

techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

Hello @HoHoHo42 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px){
   .header .header-row {
      flex-direction: unset !important;
    }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px){
     .header__heading-link {
        padding-bottom: unset !important;
     }
     .header__icons {
          margin-bottom: unset !important;
      }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 3 (3)

techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

Hello @HoHoHo42 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px){
   .header .header-row {
      flex-direction: unset !important;
    }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
HoHoHo42
Visitor
2 0 0

It did work! but it's a bit unaligned, the logo is more down than the search button, any way to make it even? Thanks a lot!

techlyser_web
Shopify Partner
1423 268 282

This is an accepted solution.

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid

<style>
@media screen and (max-width: 767px){
     .header__heading-link {
        padding-bottom: unset !important;
     }
     .header__icons {
          margin-bottom: unset !important;
      }
}
</style>

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com