CSS align after expanding navbar

Question

Can someone help me to align the search bar beside my icon? This is how it currently looks like.

Before expanding :

After expanding :

I want to have my search bar beside my image after expanding, can someone help me out here? Thanks!

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } 

 .topnav { background-color: transparent; } .topnav a { display: inline-block; color: black; padding: 14px 16px; text-decoration: none; font-size: 16px; } .topnav .icon { display: none; } .dropdown { float: right; padding-top: 5px; } .hehe { float: right; padding-top: 5px; } .dropdown .dropbtn { font-size: 17px; border: none; outline: none; color: black; padding: 14px 16px; background-color: inherit; font-family: inherit; margin: 0; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .topnav a:hover, .dropdown:hover .dropbtn { background-color: transparent; color: skyblue; } .dropdown-content a:hover { background-color: #ddd; color: black; } .dropdown:hover .dropdown-content { display: block; } @media screen and (max-width: 900px) { .topnav a:not(:nth-child(-n+2)), .dropdown .dropbtn { display: none; } .topnav a:not(:nth-child(-n+2)), .hehe { display: none; } .topnav a.icon { float: right; display: block; } } @media screen and (max-width: 900px) { .topnav.responsive { position: relative; } .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; } .topnav.responsive .dropdown { float: none; } .topnav.responsive .hehe { float: none; } .topnav.responsive .dropdown-content { position: relative; } .topnav.responsive .dropdown .dropbtn { display: block; width: 100%; text-align: left; } .topnav.responsive .hehe { display: block; width: 100%; text-align: left; } } 

 <div class="topnav" id="myTopnav" ng-controller="searchController"> <a href="#!/index" class="searchba"><img ng-src="" />LOGO</a> <input type="text" class="searchFeature" ng-model="selected" ng-keyup="$event.keyCode == 13 && searchFunction()" uib-typeahead="value for value in themename | filter:$viewValue | limitTo:7" placeholder="Start your search here..."> <div class="hehe"> <a href="">Developer</a> <a href="">Data Enquiry</a> </div> <div class="dropdown"> <button class="dropbtn">Categories <i class="fa fa-caret-down"></i></button> <div class="dropdown-content" > <a ng-click="pickCate(x)" ng-repeat="x in selectCate">{{ x }}</a> </div> </div> <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> </div> 

Answer 1

Try adding, position: relative; to the nav, and an absolute for .searchFeature

.topnav{
  position: relative;
}

.searchFeature{
  position: absolute;
  top: 15px;
  left: 65px;
}

Here you have a codepen!