I am currently utilizing bootstrap 4 and have a responsive navbar for smaller screens. On this navbar, I am trying to implement a search input group that spans the full width from left to right up until the menu bar icon on the right side. You can view my code on JSFiddle. How can I adjust the input group to be flexible and occupy the remaining space after the menu bar?
Despite trying to set the margin-right of the input group container equal to the width of the menu bar, I'm unable to make the input field inside it take up the entire width of the form wrapper. What steps can I follow to achieve the desired layout?
Below is the CSS code snippet for the navbar:
@media (max-width: 767px) {
.navigation-container .form-wrapper {
width: 100%;
margin-right: 32px;
}
.navigation-container .menu-button {
position: absolute;
}
.navigation-container .navbar {
height: 50px;
}
}
.navigation-container .nav-link {
padding: 0;
}
...