Navbar Tabs Not Stacking Vertically in Mobile-Size Screen - css

Question

I'm brand new to CSS so please forgive me if I'm missing something obvious. I've spent several hours on this and searched this website and have not been able to resolve my issue.
I have a Shiny (R) app that I am trying to add some custom styling to using CSS. I have been making change to the Navbar, which I am happy with so far. However, something in my CSS is causing undesirable behavior in mobile-sized screens, where the tabs of the navbar do not stack vertically and overlap with the main content:
Compared to the default, which is what I would like:
I know this is something related to my CSS because when I disable it this issue is resolved. I have tried many things and nothing so far has helped, I was wondering if someone might be able to point out in my CSS where I have introduced this problem and how I might resolve it.
Thanks in advance. CSS:
/*=============NAVBAR STYLING=============*/
/*Entire navbar*/
.navbar.navbar-default.navbar-static-top{
background-color:white;
height:60px;
/*margin: 10px;*/
margin:0px;
}
/*All navbar tabs*/
.navbar-default .navbar-nav>li>a {
/*Sets consistent height for navbar tabs, must be !important*/
height:60px !important;
justify-content:center;
align-items:center;
display:flex;
}
/*Style the *active* navbar tab*/
.navbar-default .navbar-nav>.active>a{
/*Make the active tab darker in color w/ white text*/
background-color:#676767!important;
color:white!important;
border-radius: 10% / 50%;
}
.nav-link {
position:absolute;
}
/*======Screen-width specific styling=======*/
#media (min-width:1276), (max-width: 1426px) {
.navbar.navbar-default .navbar-nav > li > a {
font-size: 12px;
}
h2 {
font-size:26px;
}
.hometext {
font-size: 18px !important;
}
ol {
font-size: 18px !important;
}
}
#media only screen and (min-width:768px) and (max-width:1275px) {
.navbar.navbar-default .navbar-nav > li > a {
font-size: 11px !important;
margin-top:10px !important;
}
h2 {
font-size:24px;
}
.hometext {
font-size: 16px !important;
}
ol {
font-size: 16px !important;
}
}
/* Next two classes keeps the navbar tabs on the same line in smaller windows */
.min-width{
overflow-x:auto
}
ul.nav{
display:inline-flex
}
}
#media only screen and (min-width:1px) and (max-width:767px) {
.navbar-default .navbar-collapse > li{
display: block!important;
}
.navbar-default .navbar-collapse > li > a {
float: none!important;
/*Removes grey line above tabs (overlaps with logo)*/
.navbar-default .navbar-collapse{
border-color:transparent;
}
}