add navbar item in list accordin to width of page and the full of nav bar

i want to make a responsive navbar that is collapsed according to the number of items "li" not according to the width of the window i will attach some images to describe what i want to do.

1-case1:number of item not exceed the navbar width 2-number of item exceed the navbar width 3-if i collapse the window , the item in navbar must be added in dropdown list 4-if mobile ( less than 320) add all nav item in dropdown menu "bootstrap style}