I’m all new to CSS so please forgive me if I’m missing out on something noticeable. I have actually invested a number of hrs on this and also looked this internet site and also have actually not had the ability to fix my concern.
I have a Shiny (R) application that I am attempting to include some personalized designing to making use of CSS. I have actually been making modification to the Navbar, which I more than happy with thus far. Nevertheless, something in my CSS is triggering unwanted habits in mobile-sized displays, where the tabs of the navbar do not pile up and down and also overlap with the major material:
Contrasted to the default, which is what I would certainly such as:
I understand this is something pertaining to my CSS since when I disable it this concern is settled. I have actually attempted several points and also absolutely nothing thus far has actually assisted, I was asking yourself if somebody could be able to mention in my CSS where I have actually presented this trouble and also just how I may fix it.
Many thanks ahead of time. CSS:
/ *============= NAVBAR DESIGNING============= */.
/ * Entire navbar */
. navbar.navbar-default. navbar-static-top {
background-color: white;.
elevation:60 px;.
/ * margin: 10px; */.
margin:0 px;.
}
/ * All navbar tabs */
. navbar-default. navbar-nav>> li>> {a / * Establishes constant elevation for navbar tabs, have to be! vital */.
elevation:60 px! vital;.
justify-content: facility;.
align-items: facility;.
display screen: flex;.
}
/ * Style the * energetic * navbar tab */
. navbar-default. navbar-nav>>. energetic>> {a / * Make the energetic tab darker in shade w/ white message */.
background-color: # 676767! vital;.
shade: white!important;.
border-radius: 10%/ 50%;.
}
. nav-link {
setting: outright;.
}
/ *====== Screen-width certain designing======= */.
@media (min-width:1276), (max-width: 1426px) {
. navbar.navbar-default. navbar-nav > > li > > {a font-size: 12px;.
}
h2 {
font-size:26 px;.
}
. hometext {
font-size: 18px! vital;.
}
ol {
font-size: 18px! vital;.
}
}
@media just display and also (min-width:768 px) and also (max-width:1275 px) {
. navbar.navbar-default. navbar-nav > > li > > {a font-size: 11px! vital;.
margin-top:10 px! vital;.
}
h2 {
font-size:24 px;.
}
. hometext {
font-size: 16px! vital;.
}
ol {
font-size: 16px! vital;.
}
}
/ * Next 2 courses maintains the navbar tabs on the exact same line in smaller sized home windows */
. min-width {
overflow-x: car.
}
ul.nav {
display screen: inline-flex.
}
}
@media just display and also (min-width:1 px) and also (max-width:767 px) {
. navbar-default. navbar-collapse > > li {
display screen: block!important;.
}
. navbar-default. navbar-collapse > > li > > {a float: none!important;.
/ * Gets rid of grey line over tabs (overlaps with logo design) */
. navbar-default. navbar-collapse {
border-color: clear;.
}
}
