All things Shopify and commerce
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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