materialize nav bar with search and dropdown button?

Question

Welcome to my third question on SO in like 7 years. I've been pretty good at lurking.

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:

<nav>
  <div class="nav-wrapper">
    <div class="row">
      <div class="col s10">
        <form>
          <div class="input-field">
            <input id="search" type="search" />
            <label for="search"><i class="material-icons">search</i></label>
          </div>
        </form>
      </div>
      <div class="col s2">
        <ul class="right">
          <!-- Dropdown Trigger -->
          <i class="material-icons dropdown-button btn" href='#' data-activates='dropdown1'>reorder</i></a>

          <!-- Dropdown Structure -->
          <ul id='dropdown1' class='dropdown-content'>
            <li><a href="/">Logout</a></li>
          </ul>
        </ul>
      </div>
    </div>
  </div>
</nav>

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.

Thank you for any help, and please let me know if there's any other code you'd like to see!

Answer 1

To get the dropdown below you need to add data-beloworigin="true" to dropdown trigger.

And, to get it inside nav you need to give it position:absolute;

Here's the example