I am having an issue with Bootstrap regarding how to keep a search bar static on the page. Here is what I have tried so far:
https://i.sstatic.net/CqeSF.png
Below is the code I am currently using:
HTML:
<nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<div class="list-page">
<div class="row-search-bar">
<div class="pos-rel">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<p>This is an element that is part of the list of results</p>
...
</div>
</div>
</div>
CSS:
@media (max-width: 575.98px) {
.list-page {
padding-top: 24%;
margin-left: 10%;
margin-right: 10%;
}
}
/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
.list-page {
padding-top: 14%;
margin-left: 10%;
margin-right: 10%;
}
}
...
.pos-rel{
position: relative;
width:100%;
}
.row-search-bar{
position: relative;
z-index: 1030;
background-color:red;
}
I attempted to use position: fixed; in the row-search-bar CSS class to make the search bar stay in place when scrolling, but encountered this issue:
https://i.sstatic.net/yGwau.png
My goal is to make the search bar stay in place while scrolling and retain its original appearance as shown here:
https://i.sstatic.net/CqeSF.png
Any suggestions or guidance would be greatly appreciated!