Scrolling bubble menu

[Johnnycrev]

https://www.afterhoursgallery.co.uk/

I’ve added a Circle section menu code, I need to make it horizontal scrollable on mobile

Thanks!

[Samita-Danny]

Hi, @Johnnycrev
I’m Danny from Samita.
You may consider adding this code snippet. I hope it helps!

.m-submenu-mobile {
    margin-bottom: 16px;
    max-height: 100vh;
    overflow-y: auto;
}

[ProtoMan44]

@Johnnycrev hey, thanks for posting here.
please put this CSS to custom theme box of this section or add in CSS file:

@media (max-width: 768px) {
 .swiper-wrapper {
    transform: unset !important;
 }
 .swiper-wrapper {
    overflow-x: scroll;
    flex-wrap: nowrap;
 }
}

Don’t forget to mark solved if your issue is solved.

[Emre_SecretHero]

Hello @Johnnycrev ,

Go to online store ----> themes ----> actions ----> edit code ----> assets ---->section-circle-menu.css ( not sure the css file name of your component, but you can find similar css file in assets folder). add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.swiper-wrapper {
flex-wrap: nowrap !important;
justify-content: start !important;
}
}

result:

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

[Johnnycrev]

Thanks so much! this worked. I don’t suppose you could tell me how i can use the custom font ive installed into the theme for the titles of the circle menu?