title: materialize nav bar with search and dropdown button?
body: <p>Welcome to my third question on SO in like 7 years. I've been pretty good at lurking.</p>
  
  <p>Anywho, I'm working with the Materialize framework and trying to create a search nav bar with a vertical dropdown on the right side. Here is what my code looks like at the moment:</p>
  
  <pre><code>&lt;nav&gt;
    &lt;div class="nav-wrapper"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col s10"&gt;
          &lt;form&gt;
            &lt;div class="input-field"&gt;
              &lt;input id="search" type="search" /&gt;
              &lt;label for="search"&gt;&lt;i class="material-icons"&gt;search&lt;/i&gt;&lt;/label&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
        &lt;div class="col s2"&gt;
          &lt;ul class="right"&gt;
            &lt;!-- Dropdown Trigger --&gt;
            &lt;i class="material-icons dropdown-button btn" href='#' data-activates='dropdown1'&gt;reorder&lt;/i&gt;&lt;/a&gt;
  
            &lt;!-- Dropdown Structure --&gt;
            &lt;ul id='dropdown1' class='dropdown-content'&gt;
              &lt;li&gt;&lt;a href="/"&gt;Logout&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>I would like for the nav bar to be transparent until I click on it, when the whole bar turns white for the search feature. The dropdown on the right side should be inside the nav bar, and when I click on that, Logout appears below. As you can see from the two photos, the whole bar isn't turning white (I'm assuming because I've got it in a col s10), and the dropdown isn't dropping below, but rather on top of. </p>
  
  <p><a href="https://i.stack.imgur.com/6L5Cr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6L5Cr.png" alt="Dropdown error"></a></p>
  
  <p><a href="https://i.stack.imgur.com/61fsq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/61fsq.png" alt="Search bar error"></a></p>
  
  <p>Thank you for any help, and please let me know if there's any other code you'd like to see!</p>