Hi i currently have a menu in the Dawn Theme but some of the menus are very long (3d print menu for example) I was wondering if someone could suggest a way to condense this or possibly be able to use an image for the customer to click on to bring them to the said products rather than have so much text? My website is www.nkcreationsni.com
Topic summary
A user seeks to condense lengthy mega menus in the Dawn theme, specifically for a menu with many product links. One responder offers direct assistance via collaborator access.
Technical Solution Provided:
- CSS code snippet shared to arrange mega menu items vertically in columns instead of horizontal rows
- Uses
flex-direction: columnandmax-height: 60vhto limit menu height to 60% of screen height - Code targets specific menu (
#MegaMenu-Content-1) but can be adapted for all menus by removing the ID selector or adding multiple selectors (#MegaMenu-Content-2,-3, etc.) with custom heights - A screenshot demonstrates the more compact vertical layout
Alternative Approach:
- Suggestion to link to collections rather than individual products for cleaner navigation
- Recommendation to add collection images on the homepage as clickable category shortcuts
Status: The discussion remains open with the user asking about applying the solution across all menu choices. One note mentions the original website URL is not currently accessible.
3 Likes
Hello I’ve taken a look at your website and i can definitely help with this. Could you send over your collaborator link so i can assist?
You may add this code to the, say “Custom CSS” of the Header section:
#MegaMenu-Content-1 .mega-menu__list {
flex-direction: column;
max-height: 60vh; /* this limits the height of the megamenu pane */
justify-content: initial;
gap: 1rem;
}
This will arrange contents of the first drop-down in a different way, would make it more compact.
1 Like
Is there a way for this to work on all of the menu choices?
Hello @chellelynn ,
I hope you are doing well!
Please share the website URL again. The link that you have provided is not working
Initially, submenus arranged in rows, horizontally and limited by megamenu width - then the list wraps to the second row…
My code arranges them vertically, in columns and to limit the column height I’ve added the max-height rule which limits the height to 60% of the screen height.
You can try and omit the #MegaMenu-Content-1 – then the rule will apply to all drop-downs, but not sure how nice it would look.
Or you can add several with #MegaMenu-Content-2, -3, etc and set different max-height for better looks.
The best way to handle long menus in Dawn is to link to collections instead of individual products, which keeps the navigation much cleaner. You can also make things more user-friendly by adding collection images on your homepage so customers can click the picture of the category they want to shop.