Menu arrow and flow

Shopify Discussion

Topic summary

Customizing Shopify’s mobile menu drawer icons and motion.

  • Goal: Replace the current submenu arrow icon and make the menu glide/transition smoothly like milkitbaby.shop.

  • Implementation: A new SVG arrow was added via a snippet (snippets/drawer-submenu-arrow.liquid) and referenced in snippets/header-drawer.liquid. CSS in base.css was used to position and orient the icons.

  • Key CSS changes:

    • Right-facing chevron positioned absolutely (right: 3rem; top: 50%; transform: translateY(-50%)).
    • Back/close button chevron rotated 180° and positioned to the left (left: 10–15px; adjustments to margin/right removed). These changes fixed the arrow appearing attached to the text and aligned it as intended.

  • Outcome: The arrow icon styling and the back button icon now match the requested look; user confirmed it works.

  • Pending item: The smooth transition/slide-in animation for menu interactions (like milkitbaby.shop) remains unresolved; no specific method or code for the animation has been provided yet.

  • Notes: Screenshots and code edits (header-drawer.liquid, drawer-submenu-arrow.liquid, base.css) are central to understanding the changes. The thread is collaborative and currently open regarding the menu transition effect.

Summarized with AI on December 21. AI used: gpt-5.
1

I want to change my menu arrow from this

Screenshot_20240827_075308_Samsung Internet.jpg
Screenshot_20240827_075308_Samsung Internet.jpg1080Ă—2340 70.4 KB

To this

Screenshot_20240827_141736_Samsung Internet.jpg
Screenshot_20240827_141736_Samsung Internet.jpg1080Ă—2340 68.5 KB

I also want menu to flow nicely, the way it glides in smoothly

This is my menu now www.stitchesdxb.ae

I want it to flow like this following website

https://milkitbaby.shop/

2

Hello @stitchesdxb , Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your snippets → header-drawer.liquid file.

download (37).png
download (37).png1842Ă—915 158 KB

download (38).png
download (38).png1830Ă—916 130 KB

// Add snippets -> drawer-submenu-arrow.liquid
// add the below svg code into that file.

After add snippet file of new arrow and call it in the header-drawer.liquid file add please follow this steps to add CSS.

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following CSS code at the end of the file.
svg.icon.icon-chevron-right.icon--direction-aware {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
}
.menu-drawer__close-button svg.icon.icon-chevron-left.icon--direction-aware{
    transform: rotate(0deg);
    margin-right: 1rem;
}

See the screenshots below,

Screenshot from 2024-08-27 16-37-44.png
Screenshot from 2024-08-27 16-37-44.png323Ă—775 16.9 KB

Screenshot from 2024-08-27 16-37-49.png
Screenshot from 2024-08-27 16-37-49.png323Ă—775 16.2 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

1 Like
3

Thanks! This worked.. but the arrow is attached to the word not like your screenshot..

Screenshot_20240827_153126_Samsung Internet.jpg
Screenshot_20240827_153126_Samsung Internet.jpg1080Ă—2340 76.7 KB

4

Please add the CSS for this,

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following CSS code at the end of the file.
svg.icon.icon-chevron-right.icon--direction-aware {
    position: absolute;
    right: 3rem;
    top: 50%;
    transform: translateY(-50%);
}
.menu-drawer__close-button svg.icon.icon-chevron-right.icon--direction-aware {
    transform: rotate(180deg);
    margin-right: 3rem;
    top: unset;
    left: 15px;
}

 
1 Like
5

Perfect Thank you!

now for the back button I also want it to be the same icon

20240421_093734s.png
20240421_093734s.png915Ă—1323 34.7 KB

1 Like
6

download (40).png
download (40).png1845Ă—928 156 KB

Please render new arrow here.

1 Like
7

@stitchesdxb Please update the CSS also ,

.menu-drawer__close-button svg.icon.icon-chevron-right.icon--direction-aware {
    transform: rotate(180deg);
    top: unset;
    left: 10px;
}
1 Like
8

Thank you so much! it works now.. for the other menu issue (the smooth transition once clicked on the menu item) do you know how I could achieve that? just like this website: https://milkitbaby.shop/