Adjusting the responsive navbar breakpoint
Our navbar, with the logo image, larger nav items, and icons, has grown in width. And a problem for our responsive design has arisen. Try resizing your browser window from wide to narrow (approx 480px) and back again, and chances are you'll see the navbar bump down under the logo at some point in the mid-range.
What's happened? The navbar has grown too wide for the container when our viewport is between 768px to 991px. This falls between the Bootstrap variables @screen-sm-min and @screen-md-min.
The @grid-float-breakpoint sets the point at which the navbar collapses. You'll find this variable in _variables.less ...
Get Bootstrap Site Blueprints now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
