Menu wrapping on smaller screens 14-15 inch and tablets

[SebastianJ]

Hello everyone,

I'm completely new to the forum.
How do I prevent my menu from wrapping into second line on smaller screens like 14-15 inch laptops and tablets? The issue can be seen in the attachment.

[AMurray]

Welcome to the Joomla Forum!

Can you please provide a link to your live site demonstrating the issue you're asking about (better than a screenshot). New forum users can't add attachments until they've posted approximately 25 messages (whether this be new questions or responding to others).

I think the reason your menu is wrapping to two lines is there's too many items to fit one line (so what you see is expected). One way to avoid this is to reorganise your menus, so some items sit under sub-menus (drop-downs). Another solution, reduce the font-size of the menu item text, although this may compromise readability in favour of layout.

Modern templates typically include a "hamburger" menu, which is where the main menu module collapses, for better readability and use on mobile devices but the same technique could be used for 14/15 inch screens.

You could write CSS @media queries to set the font to a certain size for those size screens (or a predefined resolution that is typically used for such screens) or to invoke the "Hamburger" menu for screen-sizes additional to normal mobile phone devices.

If you define for instance a particular font size for a particular screen resolution(s) the text will be automatically adjusted when viewed on a device set to those resolutions. It wont' be perfect of course considering the number os screen resolutions that could be used but you'd just have to take an approximate guess.

See https://www.w3schools.com/cssref/atrule_media.php and https://www.w3schools.com/css/css3_mediaqueries.asp for more information.

Some visitor analytics applications can detect visitor screen resolutions, so maybe that's also a way forward to determine what are the best and averages based on visitor behaviour.