Responsive mobile design for a custom menu

Store Design
, , ,

Topic summary

A user is seeking help with a custom flower-shaped navigation menu where each petal serves as a clickable button to collection pages. The menu works on desktop using manual positioning, but breaks across different mobile screen sizes.

Current Issue:

  • Manual CSS positioning causes distortion on various mobile devices
  • Each petal element requires precise placement that doesn’t scale responsively

Proposed Solution:
Another user provided mobile-specific CSS code using media queries (max-width: 749px) that:

  • Reduces centerpiece and petal image sizes (50-60% max-width)
  • Adjusts individual petal positions using percentage-based top/left/right values
  • Applies specific sizing to petal-2 (260px width)
  • Repositions the centerpiece element

Status: Solution offered but not yet confirmed as tested or working. The discussion includes a screenshot of the desktop version and links to the development site and GitHub repository.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello, I need help with making this custom menu functional on mobile. The menu is a flower, and each petal is a button which leads to a collection page. To make it functional on desktop, I had to manually position each piece. I tried doing this same thing on mobile, but when I switched to different-sized phone screens, the menu became distorted. If anyone knows a solution, I would greatly appreciate it!

Here is my site: https://pacess-theme-v2.myshopify.com?preview_theme_id=144676421817
PW: iffais
https://github.com/ossov/pacess-theme-project

Cheers!

Screenshot 2025-06-26 at 11.42.32 AM.png
Screenshot 2025-06-26 at 11.42.32 AM.png1842×877 59.8 KB

2

@ossov

Please add the following code at the end of your css file for mobile.

@media screen and (max-width: 749px) {
.flower-menu__centerpiece  img  { max-width: 60%;}
.flower-menu__link img {max-width: 50%;}
.petal--1 {top: 2.5%; left: 12.5%;}
.petal--2 { top: -6%; left: 50%;}
.flower-menu__link.petal--2  img {width: 260px !important; max-width: 100%;}
.petal--3 { top: 4.5%;right: -12.2%;}
.petal--4 {top: -14%;left: 30%;}
.petal--5 { top: -5.5%;right: 30%;}
.flower-menu__centerpiece {position: absolute;top: 4%;left: 57%;transform: translate(-50%, -50%);z-index: 2;}
}

Hope this works!