How to add a drop down menu arrow icon?

Shopify Discussion
1

I am using the Horizon theme and created a drop down menu. But it does not have an arrow icon as I expected, like the picture shown below.

Reference:

image
image1120×145 6.04 KB

Mine:

image
image1020×116 1.89 KB

What should I do?

My store address:https://www.ojeffy.com/

password:gewpra

2

Hey @Leo_Bryan

I don’t recommend using this, because without the backend access it can’t be done professionally but for now you can use this code. It does the job.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
.menu-list__list-item:not([slot=overflow]):has(a.menu-list__link[aria-haspopup="true"]):after {
    content: "˅";
    bottom: 59% !important;
    position: relative;
    left: 5% !important;
    text-align-last: end !important;
}
}
</style>

RESULT:

image
image1659×894 139 KB

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

3

Hi @Leo_Bryan,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

[aria-haspopup='true'].menu-list__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
}
[aria-haspopup='true'].menu-list__link::after {
    content: '';
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s ease;
    display: block;
    top: 0;
    position: relative;
}
[aria-expanded='true'][aria-haspopup='true'].menu-list__link::after {
    transform: rotate(-135deg) translateY(-1px);
}
4

Hi Moeed,

Your approach perfectly solved my problem！ Thank you for your time and patience.

Best

5

Hi namphan,

Your approach perfectly solved my problem！ Thank you for your time and patience.

Best

6

Hi @Leo_Bryan,

It’s my pleasure :blush:

7

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.