.navbar-expand-md {
    width: 25%;
    position: -webkit-sticky;
    position: sticky;
    left: 0;
}

.navbar-brand-bar {
    display: flex;
    min-width: 150px;
    align-items: center;
    justify-content: space-evenly;
}

.navbar-toggler {
    position: -webkit-sticky;
    position: sticky;
    right: 10px;
}

.navbar-sm-hide {
    display: none;
}

/*
Technically the best way to do this would be to add it to the Bootstrap media
query mixins. To do this, we would first need the Bootstrap source files and
we would need webpack to compile Sass files.
Note: 576 is Bootstrap's sm breakpoint (TODO: Remove if we don't use this)
Note: 768px is Bootstrap's md breakpoint.
*/
@media (min-width: 375px) {
    .navbar-expand-md {
        width: 60%;
    }
    .navbar-brand-bar {
        min-width: 300px;
    }
    .navbar-sm-hide {
        display: initial;
    }
}

/*
Note: Might want intermediate point so you cannot scroll branding off screen

@media (min-width: 576px) {
    .navbar-expand-md {
        width: 60%;
    }
} */
@media (min-width: 768px) {
    .navbar-expand-md {
        width: 100%;
    }
}