Review selector responsive behavior

Selector responsiveness depends on both the chosen surface and the active theme.

Shortcode and floating dropdowns

POM Translate's dropdown menu:

  • measures available space when opened;
  • can open above or below;
  • can align left or right;
  • limits its width to the viewport;
  • limits its height and adds internal scrolling;
  • recalculates while an open selector is resized or scrolled.

The fixed floating dropdown sits near the bottom-right. At widths up to 782 pixels, its inset changes from 1rem to 0.75rem.

A navigation selector becomes part of the theme's menu tree. The theme controls breakpoints, hamburger behavior, submenu transitions, overflow, and touch targets.

Test both Dropdown menu and All languages at the same level if the menu changes structure substantially on mobile.

Same-level and shortcode-link formats do not use dropdown collision measurement. Their wrapping, gaps, alignment, and overflow come from the surrounding layout and site CSS.

Responsive acceptance test

Check at least:

  1. the narrowest supported phone width;
  2. the WordPress 782-pixel breakpoint;
  3. tablet portrait;
  4. the desktop header breakpoint;
  5. 200% browser zoom;
  6. a locale with the longest visible label.

Verify that every language remains reachable, focus is visible, the selector does not cover critical controls, and opening it does not create horizontal page scrolling. Include cookie banners, sticky headers, and administration bars in the test when they appear in production.

Add the primary user role as a body class
Previous
Language selector shortcode reference
Next