Mobile Menu: How to hide/display none to drop down arrows?

[onyx_au]

In my mobile menu, there are two specific drop down arrow SVGs that I need gone or hidden as there's nothing after.

I am using a megamenu app and unfortunately, I can't use the default shopify menu as it clashes with the app.

I can hide the drop down arrows, but it hides all, which I don't want. I can't seem to find the specific selector/code to hide just 1.

The ones in the circles I need hidden

Thank you

Website preview: https://44qqmmdb3kktdte9-64183730394.shopifypreview.com 

[DaisyVo · Accepted solution]

Hi @onyx_au 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (max-width: 768px){
sht-menu-drwer#menuDrawer .drawer__body.js-menu-drawer-body-container > div.drawer__body__container > li:nth-child(1) > ul > li:nth-child(3) > a > span.tmenu_indicator {
    display: none !important;
}
sht-menu-drwer#menuDrawer .drawer__body.js-menu-drawer-body-container > div.drawer__body__container > li:nth-child(1) > ul > li:nth-child(4) > a > span.tmenu_indicator {
    display: none !important;
}
}

Here is the result: https://prnt.sc/cIRJ4Alw85b0

I hope this helps

Best,

Daisy

[onyx_au]

Thank you! That fixed it! Took me ages to try find it myself!