hi, i would like to know how to separate the images as in the first photo and modify it as in the second photo.
thanks for the support, have a good day
website URL: https://drip-graffiti.com/
photo 1
photo 2
Topic summary
A user seeks help modifying the mega menu layout in Shopify’s Dawn theme to separate and reposition images.
Initial Request:
- User wants to transform their current mega menu image layout to match a reference design
- Provided website URL and comparison screenshots
Solution Attempts:
- First CSS code snippet provided to add before
</body>tag in theme.liquid - Issue arose: images appeared misaligned after initial code implementation
- Quick fix suggested: adjust
topattribute from existing value totop: 0px - New problem emerged: updated code caused layout issues in other menu sections
- Latest iteration: complete code replacement offered to resolve all alignment problems
Current Status:
- Discussion remains ongoing with iterative troubleshooting
- Multiple CSS code revisions provided to address cascading layout issues
- User testing each solution and reporting results
- Support team actively refining code based on feedback
The conversation involves custom CSS modifications to the theme’s liquid files, specifically targeting mega menu image positioning and spacing.
photo 1
photo 2
Hello,
Please add below code above in theme.liquid
online store >> edit code >> theme.liquid
after added code take a look on mega menu.
If discuss further discuss about your store then you can feel to free content us via mail, message or Whatsapp.
We are happy to help you.
if our solution helpful for you then please like and tap on accepted.
Thankyou 
You can change the top attribute here to solved issue above
change to
top: 0px**;**
This is result
1 Like
ok please replace all previous code with below code.
after replace this code issue is gone from your store.
Thankyou
@stra10 ok a new issue rised, don’t worry replace whole code with below code
we update the previous code. Please let us know if create any issue.