_navbar-offcanvas.scss

// Reset offcanvas above the breakpoints Start
.navbar-expand {
    @each $breakpoint in map-keys($grid-breakpoints) {
        $next: breakpoint-next($breakpoint, $grid-breakpoints);
        $infix: breakpoint-infix($next, $grid-breakpoints);

        &#{$infix} {
            @include media-breakpoint-up($next) {
                .offcanvas {
                    .offcanvas-header {
                        display: none;
                    }

                    position: inherit;
                    bottom: 0;
                    flex-grow: 1;
                    visibility: visible !important;
                    transition: none;
                    transform: none;
                    border-left: none;
                    border-right: none;
                    z-index: inherit;

                    .offcanvas-body {
                        flex-grow: 0;
                        padding: 0;
                        overflow-y: visible;
                        display: flex;
                    }
                }

                .offcanvas-top,
                .offcanvas-bottom {
                    border-top: none;
                    border-bottom: none;
                    height: auto;
                }

                // Reset background-color in case bg-* color classes are used in offcanvas
                .offcanvas {
                    background-color: transparent !important;

                    .offcanvas-body {
                        background-color: transparent !important;
                    }
                }
            }
        }
    }
}
// Reset offcanvas above the breakpoints End

// Enable offcanvas-{dark | light} classes to set nav-link colors in offcanvas independently of navbar-{dark | light} classes Start
.navbar-expand {
    @each $breakpoint in map-keys($grid-breakpoints) {
        $next: breakpoint-next($breakpoint, $grid-breakpoints);
        $infix: breakpoint-infix($next, $grid-breakpoints);

        &#{$infix} {
            @include media-breakpoint-down($next) {
                .offcanvas-light .nav-link {
                    color: $navbar-light-color;

                    &:hover,
                    &:focus {
                        color: $navbar-light-hover-color;
                    }

                    &.disabled {
                        color: $navbar-light-disabled-color;
                    }

                    &.active {
                        color: $navbar-light-active-color;
                    }
                }

                .offcanvas-dark .nav-link {
                    color: $navbar-dark-color;

                    &:hover,
                    &:focus {
                        color: $navbar-dark-hover-color;
                    }

                    &.disabled {
                        color: $navbar-dark-disabled-color;
                    }

                    &.active {
                        color: $navbar-dark-active-color;
                    }
                }
            }
        }
    }
}
// Enable offcanvas-{dark | light} classes to set nav-link colors in offcanvas independently of navbar-{dark | light} classes End