I am currently experimenting with creating an expand-on-hover search form within a Bootstrap 4 navbar. While I have achieved a smooth transition effect on the search form upon hover, I have noticed that the menu next to it abruptly jumps. In the past, I successfully implemented a similar layout using Bootstrap 3 and floated elements, resulting in a seamless sliding effect. However, with flexbox, I am encountering a different behavior. As I continue to delve into flexbox, I wonder if there is a way for all elements in the line to slide over smoothly without relying on floats.
#secondaryNav {
justify-content: flex-end;
transition: all 0.5s;
}
#secondaryNav #searchform {
.input-group {
justify-content: flex-end;
}
.search-form-control {
transition: all 0.5s;
max-width: 0;
overflow: hidden;
}
}
#secondaryNav #searchform:hover {
.form-control {
max-width: 100%;
}
}