Currently, I'm facing two issues that I need assistance with:
On smaller screens, the search bar drops out of the navbar collapse inexplicably, and I'm struggling to identify the cause.
The width of the search bar seems to be overriden by Awesomplete.js or CSS, shifting it to the left side without a clear explanation.
If anyone is interested in taking a look, here's the jsfiddle link: https://jsfiddle.net/x4vusam1/
.bg-steel {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#09c6f9+0,045de9+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e3b70+0,29539b+100 */
background: purple;
}
.navbar-brand {
color: white !important;
}
.btn {
background-color: transparent !important;
}
.navbar-collapse {
position: relative;
padding-top: 20px !important;
max-height: 400px;
}
.navbar-collapse form[role="search"] {
position: absolute;
right: 0;
padding: 0;
margin: 0;
z-index: 9;
}
.navbar-collapse form[role="search"] button,
.navbar-collapse form[role="search"] input {
padding: 8px 12px;
border-width: 0;
box-shadow: none;
outline: none;
}
.navbar-collapse form[role="search"] input {
padding: 16px 12px;
font-size: 14pt;
font-style: italic;
color: rgb(160, 160, 160);
box-shadow: none;
}
.navbar-collapse form[role="search"] button[type="reset"] {
display: none;
}
@media (min-width: 768px) {
.navbar-collapse {
padding-top: 0 !important;
padding-right: 38px !important;
}
.navbar-collapse form[role="search"] {
width: 38px;
}
.navbar-collapse form[role="search"] input {
font-size: 15pt;
opacity: 0;
display: none;
}
.navbar-collapse form[role="search"].active {
width: 100% !important;
}
.navbar-collapse form[role="search"].active button,
.navbar-collapse form[role="search"].active input {
display: table-cell;
opacity: 1;
}
}
.awesomplete [hidden] {
display: none;
}
.awesomplete .visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0);
}
.awesomplete {
display: inline-block;
position: relative;
}
.awesomplete > input {
display: block;
}