Struggling with aligning elements in the right position within the bootstrap navbar. I want to float Option 1 and Option 2 elements to the right and center the Search Input. Despite trying the !important rule, it still doesn't seem to work properly. Additionally, when the content collapses and you click the navbar toggler button, it shifts slightly from the left.
Edit: I also need to ensure that the navbar displays in a specific order when collapsed: Brand, Search Input, Toggler button. The content of the toggler button should appear below the Search Input.
Here's the relevant code snippet:
.navbar{
background-image: cornflowerblue;
}
#mainNav{
border: 5px solid black;
margin: 3%;
background-color: white;
}
body{
background-color: grey;
}
#navContent{
background-color: white;
margin: 3%;
}
#final{
border: 5px solid black;
margin: 3%;
background-color: white;
}
#searchForm{
margin: auto;
}
#test{
text-align: center;
border: 5px solid black;
float: right;
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container-fluid">
<section class="row" id="mainNav">
<nav class="navbar navbar-expand-xs rounded">
<a class="navbar-brand" href="#">Brand</a>
<form class="form-inline" id="searchForm" role="search">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-secondary" type="button"><i class="fa fa-search"></i></button>
</div>
</div>
</form>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div id="test">
<div class="collapse navbar-collapse" id="navToggler">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Option 1</a></li>
<li class="nav-item"><a class="nav-link" href="#">Option 2</a></li>
</ul>
</div>
</div>
</nav>
</section>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</body>