This explains the setting that decides when your navigation turns into a hamburger — and why it is deliberately separate from the breakpoint that collapses the page layout.
The setting itself
Under Global Site Settings → Layout & Dimensions you will find Menu's Breakpoints - Solo Theme. Five widths are offered:
- 576px / 36rem
- 768px / 48rem
- 992px / 62rem — the default
- 1200px / 75rem
- 1400px / 87.5rem
Below the chosen width the menu switches to its compact, toggled form; above it, the full horizontal menu is shown.
Two breakpoints, not one
Directly above it sits Website's Breakpoints, offering the same five widths for the page layout. They are independent on purpose. A menu with a dozen top-level links runs out of room long before a two-column layout does, so you can let the navigation collapse at 1200px while the columns hold until 992px. Match them only if your menu is short.
How to pick one
- Put your real menu in place, with its real labels — not placeholder text.
- Narrow the browser slowly and watch for the point where links wrap or collide.
- Choose the next value up from that point.
- Re-check after adding any menu item, since one extra link can move the threshold.
Test at the exact widths listed, not approximately, because a media query at 992px behaves differently at 991 and 993. This guide to small screen sizes is useful background for choosing the value.
What happens behind the setting
Solo attaches a stylesheet matched to your choice — one file per breakpoint — and prints the matching class on the page wrapper. Only the file you selected is loaded, so there is no cost to the four you did not choose. The layout breakpoint works the same way with its own set of files.
Solo runs on Drupal ^10.1 || ^11 || ^12 with PHP ^8.1. See the Solo theme page.
Want a Drupal theme built or customised around your brand rather than configured by hand? See Drupal theming services, or request a quote.
