0

I'm doing navbar with search box using Bootstrap and I have problem on mobile. At screen width 576px or above it looks like I want but below, the search icon moves under the input.

576px 576px

550px 550px

Any ideas why it happens and how to solve it? I tried several solutions and nothing works. I don't have any media queries below 576px. I have only for max-width:992px.

body {
  background-color: black !important;
}

.mobile-form {
  border: none;
  color: #ffffff;
  background-color: #292935;
}

.mobile-border {
  border-bottom: 1px solid #ffffff;
  margin-left: 20px;
  margin-right: 20px;
}

.mobile-search-icon {
  float: right;
  margin-top: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet">

<form class="form-inline d-block d-lg-none mobile-border">
  <input class="form-control mobile-form" type="search" placeholder="Search our site" aria-label="Search">
  <i class="fas fa-search text-white ml-3 mobile-search-icon" aria-hidden="true"></i>
</form>
showdev
  • 28,454
  • 37
  • 55
  • 73
maja
  • 175
  • 5
  • 17
  • Does this answer your question? [Bootstrap glyphicons appearing on the next line instead of at the end of an input element](https://stackoverflow.com/questions/37404987/bootstrap-glyphicons-appearing-on-the-next-line-instead-of-at-the-end-of-an-inpu). Also see [Put search icon near textbox using bootstrap](https://stackoverflow.com/questions/24682421/put-search-icon-near-textbox-using-bootstrap). In short, use an [input group](https://getbootstrap.com/docs/4.4/components/input-group/). – showdev Mar 11 '20 at 03:26
  • I checked now and it works but crucial was also to change display from block to flex. – maja Mar 12 '20 at 12:12

2 Answers2

-1

Add:

.mobile-form
 position: relative

.mobile-search-icon
 position: absolute
 right: 0
 top: 10px
Bartek Qoster
  • 17
  • 3
-1

I've just solve it. The solution is to:

  1. change in html d-block to d-flex
  2. add
.mobile-border {
        justify-content: space-between;
        flex-flow: row nowrap;
}
  1. and remove float-right from mobile-search-icon
maja
  • 175
  • 5
  • 17