Need Help Adjusting Logo and Header Layout on My Store (rappid.run)

Need Help Adjusting Logo and Header Layout on My Store (rappid.run)

rappid
Excursionist
20 0 2

 

Hey everyone,

 

I could really use some help with a few adjustments on my store, rappid.run. Here’s what I’m trying to do:

1.Merge the three lines of my logo by closing the gaps and shift the logo slightly to the left.

2.Move the cart symbol to the right for better alignment.

3.Close the gap at the top between the header and the start of the page.

4.Also, close the gap between the header and the collection section.

 

I’ve attached a screenshot for reference (see below). Any advice on how to tackle these issues, whether in CSS or otherwise, would be greatly appreciated. Thanks in advance for your help!

 

Best,

Kim

 

 

rappid_1-1737052662274.png

 

rappid_0-1737052649092.png

 

Replies 5 (5)

shreyhweb
Shopify Partner
714 118 133

Please give us the store URL then we will able to help you

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
rappid
Excursionist
20 0 2

rappid.run - thank you!

shreyhweb
Shopify Partner
714 118 133

If this solution is work for you then please like and accepted the solution.

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
shreyhweb
Shopify Partner
714 118 133

Please add the below code in theme.liquid above </body>

 

 

 

<style>
@media only screen and (max-width: 600px) {
   .header {
       padding: 0 !important;
   }
   .header__icons{
     padding-right: 0!important;
   }
   .header__icon {
      height: 5.4rem!important;
    }
   .header__icon span {
     max-width: 65px!important;
   }
   .menu-drawer-container {
     display: flex;
     max-width: 50px!important;
     padding-left: 20px!important;
    }
    .header__icon span{
      max-width: 35px!important;
    }
}
</style>

 

 

 

Result:

shreyhweb_1-1737054060622.png

 



Thank you!

- If You Find Our Solution Helpful Please Like And Mark As Accepted!
- Sip, savor, and support – your Coffee Tip helps us keep coding.❤️
- If You Want To Further Discussion. Then Contact - info@shreyhsoftsolutions.com
rappid
Excursionist
20 0 2

Wow thank you! now the products are a bit too far on the left can I move them back slightly?