Styling to move it to top, and hide input until focused.
<input type="submit" value="Add" />
</form></li>
</ul>
+
+<form id="search">
+ <input type="search" name="q" value="" placeholder="search" /><button type="submit">🔍</button>
+</form>
</section>
<:
}
margin: 1ex 0;
display: inline-block;
}
+
+#nav {
+ position: relative;
+}
+form#search {
+ display: block;
+ position: absolute;
+ width: 100%;
+ text-align: right;
+ top: -7ex;
+}
+#search input {
+ width: 100%;
+ transition: all .5s ease-in;
+}
+#search:not(:focus-within) input {
+ width: 0;
+ padding-left: 0;
+ padding-right: 0;
+ visibility: hidden;
+}
+#search button {
+ position: absolute;
+ right: 0;
+ height: 100%; /* like input */
+ border: 0;
+ background: none;
+ color: inherit;
+ font: inherit;
+ cursor: pointer;
+}