Impulse Theme- Adding Down Arrow to Header Menu Bar options

Store Design
, , ,

Topic summary

A user running Impulse 2.0 theme wants to add visible down arrows to header menu items that have dropdowns. Currently, the dropdown only appears on hover without a visual indicator that customers can click.

Proposed Solution:
Another participant suggests adding CSS code to the theme file:

  • Use ::after pseudo-element on .site-nav__dropdown-trigger
  • Insert FontAwesome down arrow icon (\f107)
  • Customize styling with margin-left property

Current Status:
The original poster attempted the solution but reports it didn’t work when added to:

  • Custom CSS area
  • Bottom of theme.css.liquid
  • Header-desktop-nav.liquid file

The issue remains unresolved, with no working implementation identified yet.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

I run the 2.0 Impulse these and would like to add Down arrows to my menu in my header to signify they drop down. Right now you just hover over them anti shows the drop down. I would like to have a down arrow that customers can click.

2

Scroll to the bottom of the file and add the following CSS code:

.site-nav__dropdown-trigger::after {
  content: '\f107';
  font-family: 'FontAwesome';
  margin-left: 5px;
}

This will add a down arrow after each menu item with a dropdown. You can customize the arrow style by adjusting the CSS properties

3

I tried it in the Custom CSS area, in the bottom of Theme.Liquid and Header-desktop-nav.liquid with no changes.