/\* I also have my meta viewport tag set to device width on my index.php file.

```
<header class="site-header">
<nav class="site-nav">
    <ul><h4>
        <li><a href="index.php"><img src="/inc/menubutton.png" style="width:25px; height: 25px;"></a></li>          
        <li><form name="search" method="post" action="searchresults.php"></li>
        <li><input type="text" class="searchbar" value="Search" style="width:400px;"></li>
        <li><input type="image" class="searchbutton" src="inc/searchbutton.png" alt="Submit Form" style="height: 25px; width: 25px;"></li>
        </form>
        <li><a href="member.php"><img src="inc/ Memberbutton.png" style="width:25px; height:25px;"></a></li>
        <li><a href="cart.php"><img src="inc/cart.png" style="width:25px; height:25px;"></a></li>
    </ul></h4>
</nav>

```

This is my CSS:

```
.site-nav ul {

margin: 0;
padding-left: 20px;
background-color: black;

.site-nav ul:before, .site-nav:after {content: ""; display: table; }
.site-nav ul:after {clear:both; }
.site-nav ul { *zoom: 1; }

.site-nav ul li {
list-style: none;
float: left;
padding: 10px;

```

I want to be able to make the search bar disappear in mobile view so that the user can click the search button and makes a div pop up. If anyone has advice on making that more dynamic with JQuery that would be awesome. I want it to have a slide out effect. I have no experience with JQuery, but I have some experience with JavaScript. Thank you for your time and patience.