Ritual Theme, How can I get the collection images to be square in header menu?

Technical Q&A

Topic summary

Goal: Make collection images in the header mega-menu appear square rather than rectangular in the Ritual theme. The theme does not expose a built-in toggle for this.

Most recent guidance:

  • Add custom CSS targeting .mega-menu__link-image with aspect-ratio: 1/1 to force a square box and object-fit: contain to preserve the full image without cropping.
  • Apply it in the Header section’s “Custom CSS.” A reference to the theme’s hard-coded default was provided via a GitHub link.

Considerations and trade-offs:

  • If done via CSS, some images may appear cropped or distorted depending on object-fit. Using contain avoids cropping but may introduce empty space; using cover would fill the square but crop edges.

Context:

  • A screenshot illustrates the current rectangular images in the dropdown.

Status:

  • No confirmation from the original poster that the change worked. The solution is suggested but the outcome remains unverified/ongoing.
Summarized with AI on December 10. AI used: gpt-5.
1

I am trying to get the collection images that show up in the header menu dropdown to be square and not rectangle so that the photos fit. Most sections that have photos give me the option to change the shape to square but I do not see any such toggle for these photos. Any insight is appreciated.

Screenshot (265)
Screenshot (265)1920×1200 327 KB

2

@ABdev1 if it is not available in theme settings then it will need css, but then some of the images may look cut or squeezed

3

Try this code in the “Custom CSS” of the Header section:

.mega-menu__link-image {
  aspect-ratio: 1/1; 
  object-fit: contain;
}

Here is the default setting, hard-coded: