instagram kind of menu issue in mobile view

[momsabhiruchi]

hello every one! hope everyone are doing well. i have created a custom collection menu in circular form using custom code. but it is not displaying properly in mobile view. can anyone please help me with that?

my store details:

https://moortikar.myshopify.com/

store password: rtebra

Looking forward to a solution

Thanks in advance

[Tech_Coding · Accepted solution]

Hello @momsabhiruchi 

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){
  #shopify-section-template--23472004399393__circle_menu_xtgqjX ._circle_icon {
     margin: 30px 0 !important;
      overflow: scroll !important;
  }
  #shopify-section-template--23472004399393__circle_menu_xtgqjX .icon_circle-template--23472004399393__circle_menu_xtgqjX {
      margin-left: 0 !important;
   }
}
</style>

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

[Sangeetanahar]

hello @momsabhiruchi 

Delete this code from the section you have done that in.

#shopify-section-template--23472004399393__circle_menu_xtgqjX .icon_circle-template--23472004399393__circle_menu_xtgqjX {
     margin-left: 50px; 
}

result

Buy me a Pizza

If this was helpful, hit the like button and accept the solution.
Thanks

[momsabhiruchi]

Thanks for the reply....thank u so much

[dws_pvt_ltd]

Hello @momsabhiruchi, Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your custom section file of this section.
5. Update the following code at the end of the file or add new as per your section id you put.

#shopify-section-{{ section.id }} ._circle_icon {
  margin: 30px auto;
  overflow: scroll;
}
#shopify-section-{{ section.id }} ::-webkit-scrollbar {
  display: none;
}
#shopify-section-{{ section.id }} {
  -ms-overflow-style: none;
  scrollbar-width: none; 
}
#shopify-section-{{ section.id }} .icon_circle-{{ section.id }} {
   margin: 0px 20px;
}

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[momsabhiruchi]

Thank you so much for the solution

[dws_pvt_ltd]

@momsabhiruchi See the latest reply which i edited with new CSS. Please try this.

[Tech_Coding · Accepted solution]

Hello @momsabhiruchi 

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){
  #shopify-section-template--23472004399393__circle_menu_xtgqjX ._circle_icon {
     margin: 30px 0 !important;
      overflow: scroll !important;
  }
  #shopify-section-template--23472004399393__circle_menu_xtgqjX .icon_circle-template--23472004399393__circle_menu_xtgqjX {
      margin-left: 0 !important;
   }
}
</style>

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

[momsabhiruchi · Accepted solution]

Thank you so much for the quick response.. it indeed helped me to reach the solution.. thanks once again

[Tech_Coding]

your welcome @momsabhiruchi  glad to help you❤️