All things Shopify and commerce
Hello,
Can someone please share the code to have a verticle drop down menu. Currently, my theme only allows a horizontal menu and I would like the collections to be listed vertically under 'Women' and 'Men'. I've attached what it currently looks like and what I want it to look like.
Thank you!
bracketsfashion.com
Password: brkts12
bullet theme
Go to Themes -> Edit Code.
Find the file app.css. Add the following CSS snippet to the end of the file.
nav[aria-label="Menu"]>ul>li:nth-child(2)>details, nav[aria-label="Menu"]>ul>li:nth-child(3)>details { position: relative !important; } nav[aria-label="Menu"]>ul>li:nth-child(2)>details-menu, nav[aria-label="Menu"]>ul>li:nth-child(3)>details-menu{ position: absolute !important; left: 0 !important; } .mob-scroller { width: 500px !important; } @media (min-width: 778px) { details.dm>details-menu ul { flex-direction: column !important; margin-inline: unset !important; align-items: normal !important; } }
The final result will look like this
Hope it helps @fashion1234556
If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here ☕.
Product Labels by BSS | B2B Solution & Custom Pricing
Need help from our expert? Kindly share your request with us via community@bsscommerce.com
Hello, thanks so much for this.
do you know the code to implement a mega menu instead?
Hi,
I was able to implement this however when I make a sub menu within Womens, it causes an overlap of text. Please see the website now to understand what I mean.
I appreciate your help.
Thank you!
It's also adding a white background on some pages. See image attached
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025