Hello everyone, I’m working on customizing the header menu in my Shopify store, which uses the Horizon theme. I’m trying to implement a more robust dropdown menu system for desktop display and could use some help achieving the following:
Caret Icon for Sub-Menus: I’d like a caret (down arrow) icon to appear next to any main menu items that have sub-menus, to clearly indicate they are dropdowns.
Dropdown content: The dropdown menus are positioned directly below the parent menu instead on the left.
Hi @jessieZX,
Yes, both of those customizations are absolutely doable on the Horizon theme.
Caret Icon for Sub-Menus – I can add a down arrow next to main menu items that have dropdowns, making it visually clear to users.
Dropdown Positioning – I’ll update the styling so dropdowns appear directly below the parent menu item (instead of to the left), which is ideal for desktop navigation.
If you’d like, just share your store URL and collaborator code — if access is granted, I can take care of this for you right away.
Let me know how you’d like to proceed!
Hi @JessieZX,
Please send the website link, I will check it for you
Hi @JessieZX!
Let me walk you through a simple solution that should get you exactly what you’re looking for.
Adding the Caret Icons
First, we need to modify your header menu file to show a little arrow next to menu items that have dropdowns. Find the link section in your code and update it like this:
href="{{ link.url }}"
class="menu-list__link{% if link.active %} menu-list__link--active{% endif %}"
{%- if link.links != blank -%}
aria-controls="submenu-{{ forloop.index }}"
aria-haspopup="true"
aria-expanded="false"
{%- endif -%}
ref="menuitem"
>
<span class="menu-list__link-title">{{- link.title -}}</span>
{%- if link.links != blank -%}
<span class="menu-caret">▼</span>
{%- endif -%}
</a>
Fixing the Dropdown Position
Now add this CSS to make sure your dropdowns appear right below the menu items:
.menu-list__link {
display: flex;
align-items: center;
gap: 6px;
}
.menu-caret {
font-size: 10px;
transition: transform 0.3s ease;
}
.menu-list__link[aria-expanded="true"] .menu-caret {
transform: rotate(180deg);
}
.menu-list__submenu {
left: 0 !important;
top: 100% !important;
}
Before You Start
Please make sure to backup your theme files before making any changes. You can do this in your Shopify admin under Online Store > Themes > Actions > Duplicate.
This should give you clean dropdown arrows that rotate when hovered, and dropdowns that appear directly below their parent menu items instead of off to the side.
Try this out and let me know how it goes. If you run into any issues or need tweaks, I’m here to help troubleshoot!
Best regards,
Shubham | hello@untechnickle.com
1 Like
You can add a caret by editing the header. liquid file—within the loop that is generating menu items, test for if link. links. size > 0 and add a down arrow SVG or Unicode. To position the dropdown, you would change the css to use top: 100% and left: 0 to align directly to the bottom left.
Hello Shubham,
Thank you so much for your help! I’ve modified the caret icon as you described, replacing it with the icon I want, and it works perfectly.
I’m still running into a little snag with the dropdown menu’s positioning; it seems to be sticking to the left despite the CSS adjustments. I’m wondering if there’s just a small tweak needed to get it perfectly aligned, and I’d be so grateful if you could lend your expertise once more to help me get past this!
Best,
JessieZX
Hello,
Thank you for your kind words! You are so generous.
I’m currently trying a solution provided by another expert (Shubham) to make these customizations. The icon issue has been resolved, but the drop-down menu issue is still being worked on. Could you please help? I’d appreciate a specific solution, as I’d like to be able to make the changes myself if the template is updated or I run into issues, without having to ask for help again.
Thank you for your understanding!
Thank you for your help, I’m currently trying a solution.
Thank you for your offer, I’m currently trying a solution see if it works.
1 Like
Hey @JessieZX!
Great to hear the caret icon is working perfectly! I can see in your screenshot that the dropdown is indeed sticking to the left side instead of appearing directly below the menu item.
Looking at the Horizon theme structure, this is likely happening because the theme has some built-in positioning that’s overriding our CSS. Let me give you a more targeted fix:
Try this updated CSS:
/* Force dropdown positioning for Horizon theme */
.menu-list__submenu {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
top: 100% !important;
width: auto !important;
min-width: 200px !important;
}
/* If the above doesn't work, try this alternative */
.header-menu .menu-list__list-item {
position: relative !important;
}
.header-menu .menu-list__submenu {
position: absolute !important;
left: 0 !important;
right: auto !important;
top: calc(100% + 10px) !important;
margin-left: 0 !important;
transform: none !important;
}
/* For mega menu specifically */
.mega-menu__grid {
position: relative !important;
left: 0 !important;
}
If that still doesn’t work, try this more aggressive approach:
/* Override Horizon's mega menu positioning */
.overflow-menu::part(overflow),
.menu-list__submenu {
position: absolute !important;
left: 50% !important;
transform: translateX(-50%) !important;
top: 100% !important;
width: max-content !important;
max-width: 90vw !important;
}
/* Center the dropdown content */
.menu-list__submenu-inner {
position: relative !important;
left: 0 !important;
right: 0 !important;
}
The issue is that Horizon theme uses a complex mega-menu system that positions dropdowns based on viewport width rather than the parent menu item. The !important declarations should override those styles.
Try the first set of CSS rules first, and if the dropdown is still misaligned, use the second set. Let me know which one works or if you need further tweaking!
Best,
Shubham
2 Likes
Hi @JessieZX ,
Go to Shopify Admin → Online Store → Navigation
chose Main Menu
Add menu items under a parent item by dragging them slightly to the right.
and if you want caret with the Main menu. it can be done with custom coding.
If I was able to give you solution, please don’t forget to like and mark it as the solution.
thanks and regards
Manoj
Hi Shubham,
Wow, thank you so much for the super quick follow-up and the updated CSS! I really appreciate you taking the time to look at my screenshot and providing such specific solutions, especially that in-depth analysis of the Horizon theme’s mega-menu system – that was incredibly helpful!
I’m thrilled to tell you that the second solution worked perfectly! The dropdown is now beautifully aligned. Thank you, thank you!
I do have just one tiny follow-up question. The white background of the dropdown menu is currently stretching across the entire width of the screen, which makes the actual dropdown content feel a bit less prominent. Is there an easy way to adjust this so the background only covers the width of the dropdown content itself?
Thanks a million for all your amazing help!
Best wishes,
Jessie
Hey Jessie!
So glad the alignment is working perfectly now! I can totally see what you mean about the white background stretching across the full screen.
Here’s a simple fix to make the background only cover the actual content width:
Add this CSS:
/* Constrain dropdown background to content width */
.overflow-menu::part(overflow),
.menu-list__submenu {
width: fit-content !important;
max-width: 600px !important; /* Adjust this value as needed */
min-width: 300px !important; /* Ensures it's not too narrow */
}
/* Make sure the inner content doesn't force full width */
.menu-list__submenu-inner {
width: auto !important;
max-width: none !important;
}
/* If you're using mega menu with grid layout */
.mega-menu__grid {
width: auto !important;
max-width: 600px !important;
}
Or if you want it even more compact, try this:
/* Ultra-compact dropdown */
.overflow-menu::part(overflow),
.menu-list__submenu {
width: max-content !important;
max-width: 80vw !important; /* Prevents it from being wider than 80% of screen */
padding: 20px !important; /* Add some breathing room */
}
The fit-content or max-content values will make the background only as wide as the actual content needs, while the max-width prevents it from getting too wide on larger screens. You can adjust those pixel values to get exactly the look you want!
Try the first option first - it should give you a nice balanced dropdown that’s not too wide but still comfortable to read. Let me know how it looks!
Also, please like the replies and mark them as the solution. That’d really help. Also, in future you can reach out to us if you need any help.
Best,
Shubham | hello@untechnickle.com
1 Like
Hi Shubham,
Thanks so much for getting back to me!
So, a bit of a curveball – I updated my theme to Horizon 2.0.2 today, and it looks like my previous menu changes are causing a few hiccups. Would you mind taking a peek to see if any adjustments are needed with this new theme version?
Also, since I’m a bit new to navigating this community, I was wondering if you could quickly tell me how I’d go about marking them as the solution? I’ve been looking around but can’t seem to spot that feature!
Thanks again for all your amazing support and expertise – it really means a lot!
Best,
Jessie
Hey @JessieZX,
Of course, I’d be happy to help!
If you can share your collaborator code here or via DM/email, I’ll send over the access request right away. Once that’s accepted, I’ll take a look at how the menu is behaving in Horizon 2.0.2 and get it sorted for you.
As for marking replies as a solution, funny timing! The community just got a new look, and honestly, even we had trouble locating that button at first. :')
Once we wrap this up, I’ll help you find it (or we’ll both send Shopify a polite nudge).
Talk soon,
Shubham | Untechnickle
Good afternoon. I am looking to create a similar effect on my shopify page. would you be able to assist? Thank you!
Caret icon implementation successful using custom Liquid code
White background stretching full-screen width (solution provided using 
