Drop down arrows not appearing in Whisper theme

[Geronim0]

Hello Friends,

I am having a hard time trying to make the arrow display for my parent drop down menu using the whisper theme. The submenu only appear upon hover. Is it possible to set this up or should i change my theme to the dawn theme?

Appreciate your help on the above.

Thanks Regards,

Geronim0

[Moeed]

Hey @Geronim0

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Geronim0]

Hi Moeed,

Thanks for the quick response. Url below;

My Store

password: parceval

Regards,

Geronim0

[Geronim0]

Boxing gloves menu to be more precise

[NKCreativeSoulutions]

@Geronim0

Thanks for the quick response. Url below;

– My Store

password: parceval

Regards,

Geronim0

Hi @Geronim0,

Are you sure you’re using the Whisper theme? The link you have here is for the Horizon theme.

See this screenshot:

When I go into the theme editor of Whisper (I’ve only got the free trial), it looks like this, with the drop down chevrons included:

Let me know, if that’s the problem.

Nathan (p.s. Muay Thai is awesome!)

[Geronim0]

Hello Nathan,

Thanks for looking into it. I am new to Shopify and i took the pain to design my store since a few days. When i view the page, i cannot see any hyperlinks on the main menu, see below :

Please let me know what is the issue here.

Thanks & Regards,

Geronim0

[Geronim0]

Hi Nathan,

Also, this is what i see in the design view:

[Dan-From-Ryviu]

Have you tried updating your theme to the latest version and checking if it solves the issue?

[tim_tairli]

You’re using the Horizon theme, for whatever reason it was renamed to Whisper.

This explains the confusion.
You can see your original theme name here:

Now the question is what is your goal – if you simply want to show a chevron/downward arrow next to the top menu items which has submenu – this can be done with small Custom CSS code.

If, however, you want to change the way main menu works, like require clicking the downwards arrow to open submenu instead of just hovering over – that would require a serious modification to the theme code.
I’d rather recommend looking for another theme…

[Geronim0]

hello tim,

Thanks for pointing out the actual theme name. I was confused. I just updated and published the theme. But still no arrow next to Boxing Gloves. I only get the menu below upon hover. I guess i should replace the theme to dawn one.

What to you think?

Thanks & Regards,

Geronim0

[tim_tairli]

Still – what’s your goal?

Anyway, a theme from the Dawn family would be easier on a novice.

Themes from the Horizon family are more complex, but much more flexible without the need to edit theme code.

Basically – all themes from the Horizon family share the same base code.
Dawn family – free themes in store which do not belong to Horizon family (and they share code too).

So ultimately, there are 2 free themes – Horizon and Dawn, others are their presets.

[Geronim0]

And yes, i would like to see an arrow wherever there is submenus. If this is possible with the Horizon theme, it will be all that i require.

Can you please help with the CSS?

Thanks & Regards,

Geronim0

[tim_tairli]

Go to “Edit theme”
Add a “Custom liquid” section to the “Footer” area.
Paste this code:

<style>
.menu-list__list-item:has(.menu-list__submenu, button) .menu-list__link-title:after {
  content: "\203A";
  transform: rotate(90deg);
  display: inline-block;
  transition: transform linear 0.1s;
  margin-left: 0.25rem;
}

.menu-list__link[aria-expanded="true"] .menu-list__link-title:after,
[data-overflow-expanded="true"] button.menu-list__link .menu-list__link-title:after {
  transform:rotate(-90deg);
}
</style>

Should result in this:

[Geronim0]

Hi Tim,

Thanks will do. I will let you know how this works out.

Regards,

Geronim0

[Geronim0]

@tim_tairli

<style>
.menu-list__list-item:has(.menu-list__submenu, button) .menu-list__link-title:after {
  content: "\203A";
  transform: rotate(90deg);
  display: inline-block;
  transition: transform linear 0.1s;
  margin-left: 0.25rem;
}

.menu-list__link[aria-expanded="true"] .menu-list__link-title:after,
[data-overflow-expanded="true"] button.menu-list__link .menu-list__link-title:after {
  transform:rotate(-90deg);
}
</style>

Hi Tim,

I have been able to add the custom code to my store and it works perfectly fine. Thanks a lot for your help.

I believe the Horizon theme only display a hover menu instead of actual drop downs. Please correct me if i am wrong. For a more traditional drop down menu, the dawn theme would be most appropriate i guess.

Regards,

Geronim0

[tim_tairli]

What Horizon uses is called mega-menu.
Dawn has option to use either tradition drop-downs or mega-menu.

If you’re after drop-downs in Horizon, I’ve shared a solutions for previous versions of the theme earlier, not sure it still works for 4.1.1 – need to check.
Look at this thread, for example – Horizon Submenu/dropdown alignment & carat - #7 by tim_tairli