Main Menu sometimes cut off to three items

[janvanveldhuizen]

I built the first draft of my own website: https://janvv.nl/. This is an attempt to migrate my website from papasmurf.nl to the Perplex theme.

There is still a lot of fine-tuning to be done, but I have noticed that the menu items disappear when you reduce the screen width. However, they reappear when you make the screen even smaller.

Is there something that I can do to prevent this behavior?

[bowman2001]

Hi Jan,

Thanks for your report!

No, there is currently nothing you can do to change the layout of the menu. There is simply not enough space to show all your entries in the 3-column layout version because there is only one column of space reserved for this menu. (One column is around the half of the main text width)

Your menu entries need around 1 and a half major column and this could be working, if I offer another layout option for larger site menus for this layout size. There is still enough empty space to use, if you don't add more entries.

In the near future I'm not going to find the time to implement this alternative layout for site menus, because I've just started a completely new and demanding full-time job. But this would be a useful enhancement and its on the top of my list.

[janvanveldhuizen]

Thank you for your reply.
You might see pull requests coming in from my side.
I'll happily spend some time enhancing the best Hugo theme I've seen so far.

[bowman2001]

When you want to improve the layout, please do not alter the main style file. You can add customized CSS, the process is documented.

Should you have a solution for the small menu space in the 3-column layout version, I would sure take a look at your CSS and start to implement an alternative layout option.

If you would like to add functionality, please raise an issue with a feature request, so I know what you are working on.

[janvanveldhuizen]

I have never done this before. I investigated and studied how the grid mechanism works in CSS. After experimenting with it for a day, I succeeded in displaying my entire menu at various screen sizes. See: janvv.nl.
The custom CSS feature is awesome.
My CSS can be found here; https://gitlab.com/janware/papasmurf.website/-/blob/main/assets/css/custom/menu.css.
As for me, this issue can be closed, but maybe you'll want to keep it for later improvement.

[bowman2001]

Thanks, your solution is an improvement!

As soon as I can find the time, I would like to work on the primary menu and will look into your CSS as an inspiration.