Shifting search box to right next to hrefs

Question

I need to change search form with icon to left next to Home HTML

<div class="navbar">
        <div class="navbar_logo">
            <a href="index.html"><img src="images/logo_transparent2.png"  /></a>
        </div>
        <div class="navbar navbar-light ">
            <form class="form-inline">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-none my-2 my-sm-0" type="submit"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACiklEQVR4nO2ZzWtTURDFf25ixSiIiO22FdutG8FFa2PpX+CytRQLotD/waILrXv3piCIyySk7VYXfrRd+rVx407blaI2FSNXbyAMk7SJM3kv+g4MhMA95x3umzsz90GGDKnEELAArABbwDZQi/EJ2ASKwFVgkBRiEqgAP4D6AWMPKAMTpABngLUOHr5VVIGRpEzMAV8MTDTiMzDbaxO32jzQa+AOMAWMAkdjjMX/7gJv2qxf6pWJ2y0e4AVQ6IDnAvA0KTNziugucA041AVfWHM9ckjeGRwTW+ZEOF7HDbjDybWj5MwwDpCn066RiQYuxnrTrFHBoU7IrQ+vkzVuKDrjlgIVQf68y5zYD4HzpdAqWbYde4I8vAZeKCgdwGkL4gVB/Ap/vBWa8xakK4I0FDtvLAvNBxakW4I0VGdvTAvNDQvSbUF6Fn+MCs2PFqSy6ubxR15ofvcwcgx/HFeq/D/xar23IN1MQbI/syAtCtIwT3jjntC871EQw1DkjXdC87IF6aDSooQm0gtTSpd90oq8rEyDXk2jzMmipcCE0l6Hyc4ai4rOOWuRqhCoGd9JFZTB6iEOGImFqVlox6iln1RG3XAzeQonzCpbX4uTXbeXD4vKToR4AuRwxJIi2uhQL3V4OsnEllEFBpIwU49D0XKszmOxAczH39Ox2Mk60S5K3jszo+SMV5SBw55mhpWLiU7jJ/AYWE/aDPHKpqR0AO3iG/AIOP+b4U8urO6zptILM8Tbjvk4Y2/EIzS0GF+BD/GqJzSAV4ATyvpUmflb5JSWqC5i1fs066WZtcxMAsj9bzuzDhyhDzBwgNOs598fPXbmJn2GnGKm70xoZvrWRHPOuH0szZCB1vgFpd/exdTtQfAAAAAASUVORK5CYII=" alt=""></button>
            </form>
        </div>

        <div class="navbar_text">
                <ul>
                    <li>
                        <a href="index.html">Home</a>
                        <a href="about.html">About</a>
                        <a href="contact.html">Contact</a>
                    </li>
                </ul>
        </div>
        
    </div>

CSS

.navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #99e6e6;
}

.navbar_logo img{
    width: 230px;
    height: 200px;
    cursor: pointer;
}

.navbar_text{
    margin-right: 40px;
}

.navbar_text ul li a{
    margin-left: 20px;
    font-size: 24px;
}

.navbar_text a:hover {
    color: black;
    transition: 0.5s;
}
 
.form-control.mr-sm-2{
    float: right;
    
}

I tried to change with margin-left but i think there is way better solution like serach box somehow connected with navbar texts and moves with them

Here is jsfiddle

Answer 1

First of all, you have used navbar class in main navbar and the form. You should remove it from the form div.

About your question, if you want to position your search form right next to the menu, you can do it using "margin-left:auto;" in the div.

Also you can use flex in the form-inline to center your search bar with the button, and use order:-1; in the .btn class to make the search button to appear in the left side of input.

.navbar{
    display: flex;
    align-items: center;
    background-color: #99e6e6;
}

.navbar_logo img{
    width: 230px;
    height: 200px;
    cursor: pointer;
}

.navbar_text{
    margin-right: 40px;
}

.navbar_text ul li a{
    margin-left: 20px;
    font-size: 24px;
}

.navbar_text a:hover {
    color: black;
    transition: 0.5s;
}
 
.form-control.mr-sm-2{
  justify-self:end;
    
}
.navbar-light{
 margin-left:auto;
}
.form-inline{
  display:flex;
  
}
.form-inline .btn{
  order:-1;
}
.btn img{
  width:30px;
  height:30px;
}

<div class="navbar">
        <div class="navbar_logo">
            <a href="index.html"><img src="images/logo_transparent2.png"  /></a>
        </div>
        <div class="navbar-light">
            <form class="form-inline">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-none my-2 my-sm-0" type="submit"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAACXBIWXMAAAsTAAALEwEAmpwYAAACiklEQVR4nO2ZzWtTURDFf25ixSiIiO22FdutG8FFa2PpX+CytRQLotD/waILrXv3piCIyySk7VYXfrRd+rVx407blaI2FSNXbyAMk7SJM3kv+g4MhMA95x3umzsz90GGDKnEELAArABbwDZQi/EJ2ASKwFVgkBRiEqgAP4D6AWMPKAMTpABngLUOHr5VVIGRpEzMAV8MTDTiMzDbaxO32jzQa+AOMAWMAkdjjMX/7gJv2qxf6pWJ2y0e4AVQ6IDnAvA0KTNziugucA041AVfWHM9ckjeGRwTW+ZEOF7HDbjDybWj5MwwDpCn066RiQYuxnrTrFHBoU7IrQ+vkzVuKDrjlgIVQf68y5zYD4HzpdAqWbYde4I8vAZeKCgdwGkL4gVB/Ap/vBWa8xakK4I0FDtvLAvNBxakW4I0VGdvTAvNDQvSbUF6Fn+MCs2PFqSy6ubxR15ofvcwcgx/HFeq/D/xar23IN1MQbI/syAtCtIwT3jjntC871EQw1DkjXdC87IF6aDSooQm0gtTSpd90oq8rEyDXk2jzMmipcCE0l6Hyc4ai4rOOWuRqhCoGd9JFZTB6iEOGImFqVlox6iln1RG3XAzeQonzCpbX4uTXbeXD4vKToR4AuRwxJIi2uhQL3V4OsnEllEFBpIwU49D0XKszmOxAczH39Ox2Mk60S5K3jszo+SMV5SBw55mhpWLiU7jJ/AYWE/aDPHKpqR0AO3iG/AIOP+b4U8urO6zptILM8Tbjvk4Y2/EIzS0GF+BD/GqJzSAV4ATyvpUmflb5JSWqC5i1fs066WZtcxMAsj9bzuzDhyhDzBwgNOs598fPXbmJn2GnGKm70xoZvrWRHPOuH0szZCB1vgFpd/exdTtQfAAAAAASUVORK5CYII=" alt=""></button>
            </form>
        </div>

        <div class="navbar_text">
                <ul>
                    <li>
                        <a href="index.html">Home</a>
                        <a href="about.html">About</a>
                        <a href="contact.html">Contact</a>
                    </li>
                </ul>
        </div>
        
    </div>