How it works :

Calculate total-width of Navigation Bar or Menu Calculate summation of individual widths of Menu Items by iterating them. Find the overflown elements by comparing widths. Add overflown elements to More Option.

Observe the below Markup and CSS. This Markup needs more than 1000px width to display. If your screen resolution is less then Menu Items will be overflown.

Markup :

Some times we have to show Menu or Navigation Bar with dynamic items. Because of various screen resolutions like Mobile and PC the Menu Items might be hidden or overflown. To avoid disturbance with User Interface, it is better to move overflown menu items to MORE option. In this article I am going to explain how can we make Responsive Menu or Navigation Bar by moving overflown elements to MORE option.