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"><a href="#home">Home</a></div>
  <div class="navbar-item"><a href="#links">Links</a></div>
  <div class="navbar-item"><a href="#contact">Contact</a></div>
  <div class="navbar-search">
    <select name="slct" id="my-slct">
      <option value="">--Please choose an option--</option>
    </select>
    <input type="submit" />
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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?

CodePudding user response：

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"><a href="#home">Home</a></div>
    <div class="navbar-item"><a href="#links">Links</a></div>
    <div class="navbar-item"><a href="#contact">Contact</a></div>
    <div class="navbar-search">
        <select name="slct" id="my-slct">
            <option value="">--Please choose an option--</option>
        </select>
        <input type="submit" />
    </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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"><a href="#home">Home</a></div>
  <div class="navbar-item"><a href="#links">Links</a></div>
  <div class="navbar-item"><a href="#contact">Contact</a></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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Breaking to a new row with flexbox | Tobias Ahlin