CSS - Second "line" in a navbar - css

Question

I am trying to create a navbar with two "lines".
The first line would include some links and the second one a HTML select with a submit.
The code below generates the navbar like this:
body {
margin: 0;
}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-search {
background-color: #333;
align-self: center;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>
I tried to add some <br /> but it didn't do the job.
How can I put the search div right below the home link?

Answer 1

Add width: 100% on .navbar-search
body {margin:0;}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-search {
background-color: #333;
align-self: center;
padding: 0 15px 10px;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px; /* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>

Answer 2

If you don't want the search item to take up the full width of the navbar, you can force a line break with a "collapsed row":
body {
margin: 0;
}
.navbar {
display: flex;
flex-wrap: wrap;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
.navbar-item {
background-color: #333;
/*flex-grow: 4;*/
}
.navbar-break {
flex-basis: 100%;
height: 0;
}
.navbar-search {
background-color: #333;
align-self: center;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
height: 1500px;
/* Used in this example to enable scrolling */
}
<div class="navbar">
<div class="navbar-item">Home</div>
<div class="navbar-item">Links</div>
<div class="navbar-item">Contact</div>
<div class="navbar-break"></div>
<div class="navbar-search">
<select name="slct" id="my-slct">
<option value="">--Please choose an option--</option>
</select>
<input type="submit" />
</div>
</div>
Breaking to a new row with flexbox | Tobias Ahlin