Why are letters in the mobile menu not display in one line?

  • Unknown's avatar
    marketkavh · Member ·

    I have this problem with the navigation block display on mobile version of our website: http://svobodna-zeme.cz. The individual letters of mobile menu are displayed one below the other instead of being on a single line. The submenu is displayed correctly, the orientation (layout setting) is set to horizontal and “Allow wrapping across multiple lines” is enabled. We are using Blockstarter Theme. Do you have any ideas where this error could have originated and how to fix it? Thank you, I am out of ideas.

  • Unknown's avatar
    james3265166 · Member ·

    This letter-stacking glitch usually happens on mobile because the browser is aggressively wrapping the text when the menu container’s horizontal width collapses. Since you are using the Blockstarter Theme and have ‘Allow wrapping’ enabled, the container is squeezing the text so tightly that it wraps individual characters instead of full words. You can easily fix this by forcing the menu links to stay on a single line. Go to Appearance > Editor, open your global Styles panel, click the three dots for Additional CSS, and paste this snippet:

    .wp-block-navigation-item__content { white-space: nowrap !important;}

    Alternatively, try toggling off the ‘Allow wrapping across multiple lines’ setting for the mobile overlay menu specifically. Turning it off often forces the theme’s default flexbox rules to kick in, which will keep your main menu links intact horizontally on smaller screens!

Log in or create an account to reply