Hello, excited to be posting my third question on SO after lurking for like 7 years.
Currently, I am working with the Materialize framework and trying to design a search navigation bar with a vertical dropdown on the right side. This is how my code looks:
<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 want the navigation bar to be transparent until clicked on, which should then turn the entire bar white for the search feature. The dropdown on the right side must be inside the navigation bar, and when clicked, "Logout" should appear below it. Currently, the entire bar isn't turning white, probably because of being in col s10, and the dropdown is displaying above rather than below.
https://i.sstatic.net/6L5Cr.png
https://i.sstatic.net/61fsq.png
If you have any suggestions or need more code snippets, please feel free to let me know! Thank you for your assistance!