How to avoid scrolling navigation at a lower screen resolution?

Question

css

Whatever framework I use, be it bootstrap or foundation, then if there are more than 4-5 elements in the navigation (excluding the logo), with a screen resolution of less than 900 pixels and more than 6 elements (excluding the logo) at a resolution of 1100 pixels, the navigation slides, The logo, of course, remains in place.
Screenshot attached:
habrastorage.org/storage3/243/95e/f30/24395ef309bb...
How can I solve this problem?

Answer 1

And I left it at my place, though my layout does not go, it does not crawl on the carousel and so on, but the entire navigation bar doubles. It looks great, the only thing I don’t like is that with this view, when loading, the page loses a lot of information content, since the navigation steals an extra 75 pixels in height from the rest of the content, but considering that this case will be rare, I left it as it is.
What will you do? you can make minimal indents of the navigation buttons through the media, but sometimes this is also not an option, because then the buttons will not be separated from each other and it looks bad.
Or reduce the number of menu items, which is also not always possible.

Answer 2

2 options when reducing the screen size:
1) menu in 2 rows
2) instead of the whole menu, one button with a pop-up menu, like here (the7.dream-demo.com).

Answer 3

<div style="white-space:nowrap;">
     <div style="display:inline-block"> // див с лого
     <div style="display:inline-block"> // див с меню
</div>

without any float naturally