Main Menu resizing issue when browser width is made smaller... menu items go onto 2nd line
Hi there, I see other websites allow a browser width to change, i.e. get smaller, without the menu items dropping onto a second line (this makes drop down menu items unclickable) which is a problem.
How do I make the main menu resize accordingly as a browser width changes, without there being any issue of menu items dropping to a 2nd line below and so on. If other websites can do this then surely betheme / Wordpress can do this too? Please advise.
Thank you.
Comments
Hello,
This is normal behavior, if the menu items does not fit, they will drop to the another line - the only way to fix that is decrease the menu items number by inserting them to dropdown menu or by decreasing the font size for menu items in Theme Options -> Fonts -> Size & Style.
Thanks
Hello, Thanks for replying. However, I must disagree, as I see many other websites do not have this issue at all even with many main menu items.... the main menu resizes accordingly (text becomes smaller ) until it reaches breaking point and is then Moble menu size or tablet menu size for example.
I would like to know how other websites have achieved this please? Surely there is CSS or some code or something I can add that resizes the menu item text to decrease as a browser is made smaller.
Not all screens are the same size for example. If you'd like an example of what I am referring to, please visit https://www.vegaschool.com/ and resize your browser window slowly and see how their website menu does not creep onto a 2nd line it resizes accordingly so there are no issues with tabs or overlapping or drop down menus not being clickable.
The menu on the website you sent, changes to hamburger menu on the stage, when your menu is still 'desktop' menu.
Also, this menu is made on flexbox technology (it's a new css rule, display:flex), but our theme is not prepared (we still use display:block) for having the flexbox for menu yet.
The New Header Builder (which is in development) will be made on flexbox, it will be more flexible, like on the website you sent.
For now, what I can suggest (including tips from previous reply) is increasing the "Menu breakpoint" to change to mobile menu 'quicker', its in the Theme Options -> Responsive -> Header
Thanks