Add down carat to drop down mennu on Horizon theme

Store Design
,
1

Hi all. Can anyone help me out with some custom code to add a down carat/chevron to my menu items showing that there are submenus below? Thank you!

image
image1115×264 81.1 KB

1 Like
2

Hi @inkandattitude

Welcome to the community.

I checked your site and saw you are using the Dawn theme and you have a menu with a dropdown. But the screenshot is, I guess, another theme that you are trying out?

But do check the theme settings for menu items, maybe you need to link the Menu to that Greeting Cards menu item?

3

My apologies! Yes I have the Trade theme, but I am switching to Horizon. I just published Horizon so now you can see it live.

4

Hi @inkandattitude

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

5

inkandattitudestationery.com and collab code 7845

1 Like
6

By the way, I’m looking to add the down carats to the menu so it looks like this:

image
image702×118 15.8 KB

1 Like
7

OK @inkandattitude

You can add the following CSS code in your theme, file in snippets/header-menu.liquid after line 47

<span class="menu-list__link-title">{{- link.title -}}</span>

so it looks like

        <span class="menu-list__link-title">{{- link.title -}}</span>
        {%- if link.links != blank -%}
            <span class="svg-wrapper icon-caret icon-caret">
              {{- 'icon-caret.svg' | inline_asset_content -}}
            </span>
        {%- endif -%}

and also style it a bit by adding in Header section, Custom CSS block following code

.menu-list__link .icon-caret {
      height: var(--icon-size-xs);
    width: var(--icon-size-xs);
    right: var(--margin-xs);
    top: calc(50% - var(--padding-2xs));
    flex-shrink: 0;
    transition: transform var(--animation-speed) var(--animation-easing);
}
8

Thank you! I got the carat to work, but i can’t figure out where to add the styling code you mentioned?

1 Like
9

Check image, in Header > Header section settings

scrnli_bUH9dSlt5cJm76
scrnli_bUH9dSlt5cJm761718×1297 274 KB

10

Got it!!! Thank you so much! I love it.

1 Like