Ride Theme - How to fix this overlap on the header of my website?

[supporths]

Hi!

Whenever I switch to Mobile View, the currency icon overlaps with the Cart icon. (See image below.)

Is there any way to fix this?

Website Link: www.healthspotco.com

Thank you!

[Small_Task_Help]

Hi

Hope you have Responsive Design

At theme.scss.liquid or similar Add or modify CSS rules to adjust the positioning of the currency and cart icons in the mobile view.

code example

@media only screen and (max-width: 767px) {
   .mobile-currency-icon {
      /* Add styling properties to adjust the positioning of the currency icon */
   }

   .mobile-cart-icon {
      /* Add styling properties to adjust the positioning of the cart icon */
   }
}

replace .mobile-currency-icon and .mobile-cart-icon with the actual classes or IDs associated with these

[Dan-From-Ryviu]

HI @supporths

Go to Online store > Themes > Edit code > open theme.liquid file, add this code before tag

[Moeed]

Hey @supporths

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[supporths]

Hi Moeed!

Thanks, but it’s not exactly what I was looking for. I wanted the CAD icon to be on the same level as the cart icon, if that’s possible so they don’t look awkwardly placed and overlapping.

Could you help with that?

Thank you!

[supporths]

Hi Dan!

Thanks, but it’s not exactly what I was looking for. I wanted the CAD icon to be on the same level as the cart icon, if that’s possible so they don’t look awkwardly placed.

Could you help with that?

Thank you!

[supporths]

I’ll try it. Sorry I’m a bit new to this but where can I find the classes or IDs for the mobile currency and cart icon?

[Dan-From-Ryviu]

Hi @supporths

You can try this code and check again

[Made4uo-Ribe]

Hi @supporths

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 “theme. Liquid” file. Find the tag and paste the code below before the tag.

@media screen and (max-width: 767px){
.doubly-wrapper {
    margin-top: 0px !important;
}
.header__icons {
    justify-self: center;
    padding-right: 6rem;
}
a#cart-icon-bubble {
    margin-left: -5px;
}
}

• And Save.
• Result:
• 

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

[supporths]

Hello!

I tried the code but it looks like this:

[supporths]

Hello!

I tried it but it looks like this on mobile view:

[Dan-From-Ryviu]

Please update code to this

[Made4uo-Ribe]

Yes, It may not be working cause you add some codes that make it conflicts. 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 “theme. Liquid” file. Find the tag and paste the code below before the tag.

• And save.
• Im not sure if this still working, as I said youve already add some codes and possibilities it won’t listen anymore.

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

[supporths]

Hi!
I tried the code and it worked great but the search icon now is hitting the logo. Is there any way we can adjust this?

Thank you in advance for your help!

[supporths]

Thank you for all your help!

I tried the code but it didn’t work as such.

Nonetheless, thank you so much!

[Dan-From-Ryviu]

Hi @supporths

Could take a screenshot where did you add the code?