TURBO menu issue—fonts aren't uniform?

Store Design

Topic summary

A user is upgrading their site from Turbo 2.5 to Turbo 9 and has encountered a visual inconsistency in the top navigation menu. Menu items with dropdown carets appear to have different font sizing or positioning compared to regular menu items, despite seemingly identical font-size settings in the code.

Key Details:

  • The issue is purely cosmetic—functionality remains intact
  • Affects menu items with dropdown/mega-menu carets specifically
  • Font changed from Oswald (all caps) to Raleway (normal caps) in the new version
  • Screenshots show visible size differences between items with and without carets

Suggested Solution:

  • Likely a CSS inheritance or layout issue related to how Turbo 9 renders dropdown carets
  • Recommended to inspect computed styles (font-size, line-height) between dropdown and non-dropdown items
  • Check for new classes like has-dropdown that may apply different styling
  • Custom CSS override may resolve the visual discrepancy

The discussion remains open with no confirmed resolution yet.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi—

I’m updating my site from Turbo 2.5 to the current (9). Big jump, I know, it was working fine all that time and I didn’t need to change it until now.

I’ve encountered an issue where the top menu shrinks (or perhaps relocates) the fonts whenever there’s a caret for a drop-down / mega-menu, and for the life of me I can’t find any difference in the code that would explain it. It looks like the whole menu inherits the same font size setting.

I’m wondering if there’s a padding issue? I could find that, either.

There’s no functional issue here—it works just fine. It’s just bugging me…

Gray menu is original (Oswald, all caps). Blue menu is new one with the issue (Raleway, normal caps)

Screenshot 2025-05-05 at 3.15.10 PM.png

Screenshot 2025-05-05 at 3.15.25 PM.png

1 Like
2

this definitely sounds like a CSS inheritance or layout issue tied to how the caret is rendered in Turbo 9. I’ve seen similar behavior when a dropdown caret is added using ::after or an inline element, which can slightly shift or override font styles on parent links.

Try inspecting a menu item with a dropdown vs one without and compare the computed font-size and line-height. Also, look for any new classes like site-nav has-dropdown that might apply different styles in Turbo 9. A custom CSS override might fix it if the issue is visual-only.