Skip to main content
All CollectionsAdvanced Design
Responsive menu fix - Too many links
Responsive menu fix - Too many links

"My right hand menu items disappeared." Here is a fix for when you have a horizontal menu that is too large on smaller screen sizes

Niall Diamond avatar
Written by Niall Diamond
Updated over 4 years ago

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! 🚀

Did this answer your question?