How to show the searchbar and shoppingcart icon correctly with navbar - html

Question

I am trying to get a navbar to show me the menus both for bigscreen and mobile. Having some trouble.
In bigscreen I am getting as required
webname search:submit menus menus cart
But in the responsive mobile version, I am getting the search bar trying to take the entire row, with submit overlapping to the next line.
What I want is when mobile is used, show:
website name hambuger
search bar cart icon
.mobileNav {
position: absolute;
right: 20px;
top: 0px;
}
#media only screen and (max-width: 768px) {
.mobileNav {
position: absolute;
right: 80px !important;
top: 0px;
width: 195px;
text-align: right;
}
.navbar-nav .open .dropdown-menu {
text-align: right;
border: 1px solid #efefef;
margin-top: 2px;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:active,
.navbar-default .navbar-nav>.open>a:focus {
background:none;
}
}
#cart {
display: inline-block;
}
#cart > a {
position: relative;
display: flex;
align-items: center;
padding: 5px;
border: 1px transparent solid;
border-radius: var(--border-radius);
color: inherit;
white-space: nowrap;
}
#cart .badge:after{
content:attr(value);
font-size:12px;
color: #fff;
background: red;
border-radius:50%;
padding: 3 5px;
position:relative;
left:-8px;
top:-10px;
opacity:0.9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BuyBrandedDomain</a>
<form class="navbar-form navbar-left" action="/action_page.php" data-toggle="collapse" >
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><div id="cart"><i class="fa badge fa-lg" value=11></i></div></li>
</ul>
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><span class="glyphicon glyphicon-user"></span> Sign Up</li>
<li><span class="glyphicon glyphicon-log-in"></span> Login</li>
</ul>
</div>
</div>
</nav>
I understand I have to put the cart icon code outside the collapsible to make it appear when viewed in smaller screen. I want the cart to come in that location in big screen though, and not next to the search