Menu arrow and flow

[stitchesdxb]

I want to change my menu arrow from this

 

To this

 

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/

[dws_pvt_ltd · Accepted solution]

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.

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

<svg aria-hidden="true" focusable="false" fill="none" width="12" class="icon icon-chevron-right  icon--direction-aware" viewBox="0 0 10 10">
      <path d="m3 9 4-4-4-4" stroke="currentColor" stroke-linecap="square"></path>
</svg>

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,

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

[dws_pvt_ltd · Accepted solution]

Please render new arrow here.

[Sangeetanahar]

Hello @stitchesdxb 

This will happen with code, it has svg in it. I can do this if you give me access to your store. This will not happen without coding. It has svg images, just change that.

Thanks

[dws_pvt_ltd · Accepted solution]

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.

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

<svg aria-hidden="true" focusable="false" fill="none" width="12" class="icon icon-chevron-right  icon--direction-aware" viewBox="0 0 10 10">
      <path d="m3 9 4-4-4-4" stroke="currentColor" stroke-linecap="square"></path>
</svg>

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,

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

[stitchesdxb]

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

 

[dws_pvt_ltd]

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;
}

[stitchesdxb]

Perfect Thank you!

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

[dws_pvt_ltd · Accepted solution]

Please render new arrow here.

[dws_pvt_ltd · Accepted solution]

@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;
}

[stitchesdxb]

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/