Show Icon Caret on Menu Mobile Dawn Theme

Store Design
, , , ,
1

Hi ,

I would like some arrows/icon caret on my mobile menu.

How can I please code that?

website: 1989streetwear.com

pw: bet1989

IMG_841E02782461-1.jpeg
IMG_841E02782461-1.jpeg1125×2436 111 KB

2

Hi @1989streetwear ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/component-menu-drawer.css->paste below code at the bottom of the file:

@media screen and (max-width: 990px) {
    .icon-arrow, .header__inline-menu .icon.icon-caret {
        display: block !important;
    }
}

PageFlyRichard_0-1678502833866.png
PageFlyRichard_0-1678502833866.png730×532 14.5 KB

I hope it would help you
Best regards,

Richard | PageFly

3

Hi @PageFly-Richard , thank you for your code.

How do I change the arrow icon to caret-right?

4

Hi @1989streetwear ,

You can post the icon you want here, so I can help you with the css

Best regards,

Richard | PageFly

5

THANK YOU @PageFly-Richard

1216195.png
1216195.png256×256 1.7 KB

6

Hi @1989streetwear

You can try below code:

@media screen and (max-width: 990px) {
    summary.menu-drawer__menu-item:after {
        content: "";
        position: absolute;
        right: 20px;
        top: 12px;
        background: url("https://cdn.shopify.com/s/files/1/0548/9550/9539/files/icon.png?v=1678511287") no-repeat;
        width: 20px;
        height: 20px;
        background-size: 20px;
        filter: invert(1);
    }
}

PageFlyRichard_0-1678511548147.png
PageFlyRichard_0-1678511548147.png446×549 13.7 KB

I hope it would help you
Best regards,

Richard | PageFly

7

Thank you so much man!!