I created a unique navigation bar using Bootstrap 4's grid system. The navbar is designed with two sections: one for the navigation items on the left and another for the search box on the right. Unfortunately, I am facing an issue where the search box keeps getting placed below the navigation items instead of staying in its designated section.
Below is the HTML & CSS code I used:
.custom-navbar-buttons p {
display: inline;
color: black;
margin-right: 0.4rem;
}
.custom-navbar-buttons {
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}<body>
<div class="container">
<div class="row">
<div class="custom-navbar col-12 bg-success">
<div class="custom-navbar-buttons col-8">
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
<p>Button</p>
</div>
<div class="custom-navbar-search col-4">
<input type="text" name="search" placeholder="search this site">
</div>
</div>
</div>
</div>
</body>Does anyone know how to correctly position the search box on the same line as the navigation items within the navbar?
P.S.: There are no tags surrounding the "input" element because I have already experimented with adding and removing them without success.
P.P.S.: I have already searched through Google and Stackoverflow for solutions before reaching out for help. Unfortunately, none of the suggestions provided solved my issue. Some have mentioned that too many navigation items could be causing the problem, but even with just 2 items in the navbar, the search box still doesn't align properly.