instagram kind of menu issue in mobile view

Shopify Discussion
1

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

2

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

Screenshot from 2024-09-20 12-27-36.png
Screenshot from 2024-09-20 12-27-36.png425×783 250 KB

Screenshot from 2024-09-20 12-27-45.png
Screenshot from 2024-09-20 12-27-45.png1441×778 188 KB

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

3

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

4

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 on theme.liquid

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

Tech_Coding_0-1726817455039.png
Tech_Coding_0-1726817455039.png318×507 74.6 KB

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

5

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

1 Like
6

Thanks for the reply…thank u so much

7

Thank you so much for the solution

8

your welcome @momsabhiruchi glad to help you :heart: