How to make drop down vertical stacked Bullet Theme

fashion1234556
Tourist
22 0 1

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 

 

Screen Shot 2023-12-06 at 3.25.41 pm.png

Screen Shot 2023-12-06 at 3.29.29 pm.png

Replies 4 (4)

BSS-Commerce
Shopify Expert
3465 459 515

Hi @fashion1234556 

Go to Themes -> Edit Code.

1 (1).png

Find the file app.css. Add the following CSS snippet to the end of the file.

Untitled (1).png

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

view (98).png

Hope it helps @fashion1234556 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

fashion1234556
Tourist
22 0 1

Hello, thanks so much for this. 

do you know the code to implement a mega menu instead? 

fashion1234556
Tourist
22 0 1

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!

fashion1234556
Tourist
22 0 1

It's also adding a white background on some pages. See image attached

 

Screen Shot 2023-12-13 at 12.35.26 pm.png