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

How to make drop down vertical stacked Bullet Theme

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 Partner
3478 465 561

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, 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


BSS Commerce - Full-service eCommerce Agency
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