When you are using the horizontal menu bar you might notice that some of your menu items disappear on smaller screen sizes. See the below gif example.
This is intended to make sure your menu bar doesn't break on smaller screens just incase you put too many links in. However, sometimes you can't reduce the number of menu items. In this case, here are a couple of ways to fix it.
Option 1:
Reduce the number of words
Try to use only short words, or just one or two words for each menu item.
Option 2:
Reduce the font size.
You can have the menu fonts reduce in size as the screen reduces. This works if you only have a few extra items in the menu.
Add this to your CSS Block
/* main menu - preventing the 8th and following items from getting hidden on smaller screens */
.header-full .menu .catalog>li:nth-child(n+8) { display: inline-block; }
/* main menu - adjusting font size relative to the window width */
.menu ul.catalog > li > a { font-size: 1vw; }
/* main menu - decreasing the space between the elements in the main menu */
.menu .catalog li { padding: 0; }
Option 3:
Wrap your menu
If you have a really big/long menu then you will need to wrap the menu. Here is how do do that.
/* main menu - preventing the 8th and following items from getting hidden on smaller screens */
.header-full .menu .catalog>li:nth-child(n+8) { display: inline-block; }
That's all for now. Have a great day! 🚀