Unnecessary menu wrapping

Paul King 5 months ago updated by arnelc 5 months ago 3

My site www.thecdc.nz is exhibiting odd wrapping behaviour of the top level menu on the home page.

The home page viewed on a desktop PC with Chrome browser set to full width of monitor, shows no wrapping of menu, whereas the same browser version on a laptop, with display resolution and DPI scaling identical to the desktop PC, show the last menu item wrapping down to next line, even though there is visibly ample empty space to the right where that menu item could fit.    

Could it be some defect in a CSS screen measurement algorithm is somehow factoring the physical dimensions of the respective displays when it comes to calculating responsive behaviour, rather than using the actual screen resolution and DPI scaling?       

At the end of the day, whatever the cause,  how do I keep the menu to a single line if there is visibly enough space to do so?  What css should I add in the custom css area of the theme? (I am using BoldGrid Calloway theme).  

Unfortunately, I don't know css.  Have tried poking around with Chrome 'Inspect'  function around the menu area, but have not found anything obvious to change that generates a useful result.

Any help most appreciated!

That is a shame.  My other paid theme includes front line tech support who can and do dispense simple css workarounds to formatting issues.  I don't believe the menu is too big - there is an awful lot of unused white space to the right of last menu item, and as noted, wrapping only occurs on laptops, even where screen resolution and windows DPI scaling etc are set identically to desktop PC where the issue does not occur

Sorry for the issues with the menu. The problem has to do with the responsive design of the themes used in BoldGrid. Menus are set to have only 50% of the space in that location. You can probably reduce the font size to make it fit on either screen size. Making changes to responsive design theme have the complication of affecting much more than just one thing. Changes to BoldGrid themes/inspirations that are not part of the built-in functionality typically require a custom CSS or coding change. However, you are welcome to send a ticket in through a BoldGrid Central account or through email (support@boldgrid.com). They will look at your request and if there is a reasonable coding solution, they will provide it to you.If the issue is complex, then you may need to consult with a designer/web developer. If you have any further questions or comments, please let us know.

Kindest regards,

Arnel C.


Unfortunately, we cannot dispense CSS code upon request because we're simply not equipped to provide that level of support. That would be an ideal case for enlisting the help of a designer.

If the underlying issue is that the menu is too big, you might consider utilizing the dropdown feature for more of the content, perhaps having two or three items in the top level menu instead of six.