.navbar {
    &-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 20;

        /* Flip around the padding for proper display in narrow viewports */
        > .container {
            padding-right: 0;
            padding-left: 0;
        }

        + .container {
            margin-top: (@navbar-height + @line-height-computed);
        }

        .navbar {
            padding-right: (@grid-gutter-width / 2);
            padding-left: (@grid-gutter-width / 2);

            .container {
                width: auto;
            }
        }

        @media (min-width: @grid-float-breakpoint) {
            margin-top: @line-height-computed;

            .container {
                padding-right: (@grid-gutter-width / 2);
                padding-left: (@grid-gutter-width / 2);
            }

            .navbar {
                padding-right: 0;
                padding-left: 0;

                /* The navbar becomes detached from the top, so we round the corners */
                border-radius: @border-radius-base;
            }

            /* Bump up margin of navbar */
            + .container {
                margin-top: (@navbar-height + (2 * @line-height-computed));
            }
        }
    }
}