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, under the // Grid system section.

// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-sm-min;

We need to adjust this breakpoint so that the navbar stays collapsed until the next breakpoint: @screen-md-min. Update the variable accordingly:

@grid-float-breakpoint:     @screen-md-min; // edited

Save, compile, and refresh. You'll see that the navbar does in fact stay collapsed until the next breakpoint.

Problem solved! It's time to move on to the carousel.