While attempting to create a search input with an embedded search icon that works within the Bootstrap 4 navbar when the mobile menu is displayed, I encountered some challenges. The process was much simpler in my previous version using Bootstrap 3...
https://i.sstatic.net/amOmH.png
Due to the nature of the application, I have a lengthy 'mobile' menu and therefore would like to set a max-height and overflow-y property for the navbar-collapse to prevent it from covering the entire screen.
However, upon implementing these styles in Bootstrap 4, my search icon no longer remains confined within the input field:
https://i.sstatic.net/VPc7M.png
The CSS styles I have used for my search inputs are as follows:
<div class="has-search">
<span class="fa fa-search form-control-feedback execute-quick-search"></span>
<input type="text" class="form-control quick-search" placeholder="Quick Search">
</div>
.has-search .form-control {
padding-right: 2.375rem;
}
.has-search .form-control-feedback {
position: absolute;
z-index: 2;
display: block;
width: 2.375rem;
height: 2.375rem;
line-height: 2.375rem;
text-align: center;
pointer-events: auto;
cursor: pointer;
right: 1.1875rem;
}
I found that by applying max-height/overflow-y styles to the entire .navbar element, I can keep the search icon within the input field. However, this is not the desired outcome as it causes the mobile toggler button to be scrolled off the screen. You can view a fiddle demonstrating this issue here: