Hi guys - trying to make my menu options align at the bottom of the menu instead of the middle (like jacquemus website) - this is on the dawn theme, i have already edited the code as you may tell.
Topic summary
A user is attempting to modify the Dawn theme’s mega menu to align menu options at the bottom instead of the middle, similar to the Jacquemus website. They’ve already made some code edits but need further assistance.
Proposed Solution:
One responder suggested using CSS flexbox properties:
- Add a custom class (e.g.,
mega-menu--custom) to the mega menu container - Apply CSS with
display: flex,flex-direction: column, andjustify-content: flex-end - Ensure the container has
height: 100%to push items to the bottom
Implementation Questions:
The original poster is unsure about:
- Where to locate the mega menu HTML/Liquid snippet in the theme files
- How to add the custom class to the menu
Current Status:
The discussion remains open with the user seeking clarification on implementation steps. Store URL and password have been shared for direct assistance. Another responder also requested the store URL to provide specific CSS guidance.
Hello @WolfieVoir ,
I hope you are well!
Can you please share the store URL? It will be helpful for us to provide the specific CSS which will bring the menu to the middle.
To align your mega menu items at the bottom instead of the middle, you can adjust the layout using CSS. The Dawn theme’s mega menu uses flexbox by default; adding a custom class that pushes content to the bottom will align the items vertically.
One way to do this is to wrap your mega menu in a container with a custom class (for example, mega-menu--custom) and then add the following CSS:
.mega-menu--custom {
display: flex;
flex-direction: column;
justify-content: flex-end; /* push items to the bottom */
height: 100%;
}
This forces the container to take up all available height and pushes the menu items to the bottom using justify-content: flex-end. If your mega menu has multiple columns, be sure each column is also set to height: 100% so that they align correctly.
You can add this custom class to the mega menu HTML/Liquid snippet in your theme files, or if the theme editor supports adding a custom class to the menu block, set it there and then paste the CSS into your theme’s CSS file (base.css or theme.css).
Alternatively, if you prefer not to modify code, consider restructuring the menu in the Online Store 2.0 editor by placing the menu items in a new block at the bottom of the mega menu if the theme supports block-based menus. After saving the changes, check the menu on desktop and mobile to ensure the alignment looks as expected.
Hi Andy,
Thanks for your reply!
Could you confirm what the mega meny HTML/Liquid snippet is or where i would find this?
Or how i would add the custom class?
Thanks 
password: mrsp