Change Turbo-Florence desktop menu caret size

Topic summary

Improving visibility of the desktop menu caret in the Turbo-Florence theme for older customers.

  • Context: The caret (dropdown indicator) was too faint. The goal was to make it darker/bolder or convert it to a solid triangle for better visibility.

  • First update: After sharing the store URL, a CSS tweak was suggested in theme assets (main.css/base.css/style.css/theme.css) to increase contrast: set the caret color to black and increase the icon’s font-weight. This made the caret clearer.

  • Follow-up request: The merchant asked for a thicker indicator or a solid triangle, similar to mobile.

  • Final solution: Add CSS targeting .nav-desktop span.icon-down-arrow:before to replace the icon with a CSS-drawn triangle (using borders with an 8px top black border). This produced a solid black triangle caret.

  • Outcome: Merchant confirmed the solution works perfectly and improves accessibility for older customers. No further issues raised; discussion resolved.

  • Note: Screenshots were shared to illustrate before/after, but the essential changes are the CSS adjustments.

Summarized with AI on December 24. AI used: gpt-5.

Thank you so much. This is much better. Would you have any suggestions on how to make it thicker? Or even a solid triangle like I did for mobile?