The logo, search bar, cart, login, and sign up are not aligned on the same line.
When I try to view it on mobile, distortion occurs.
The search bar and other elements get messed up.
In mobile view, nothing happens when clicking on the menu collapse button.
Here is my code:
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="hello.com">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.php" class="navbar-brand"><img src="images/logo.jpg" height="60" width="200"></a>
</div>
<div class="collapse navbar-collapse" id="example">
<ul class="nav navbar-nav navbar-right">
<li><a href="cart.php"><button type="button" class="btn btn-default btn-md navbar-btn">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span><span class="badge"><?php echo count($_SESSION["cart_array"]); ?></span>
</button></a>
<li id="login"><a href="login.php" id="login1">Login</a></li>
<li id="login"><a href="signup.php" id="login1">Sign Up</a></li>
</ul>
<form action="index.php" class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search your phone" id="search">
</div>
<button type="submit" class="btn btn-primary navbar-btn">Submit</button>
</form>
</div>
</div>
</div>