title: How do I code a media query into style=""
body: <p>In CSS, how would I select the <code>.button</code> element? I have tried just <code>.button</code> but it is not working at all. The only way I can get it to hide is by hardcoding <code>style="display: none;</code></p>
  
  <pre><code>    &lt;div id="navBar"&gt;
          &lt;nav&gt;
              &lt;li&gt;&lt;a class="button"&gt;&amp;#9776;&lt;/a&gt;
                  &lt;ul id="menu"&gt;
                      &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="about.php"&gt;About&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="schedule.php"&gt;Schedule&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="gallery.php"&gt;Media&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="sponsors.php"&gt;Sponsors&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="contactus.php"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://www.facebook.com/bobbykendallracing/"&gt;&lt;img src="images/fbicon.png"&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="https://twitter.com/bobbykendall11?lang=en"&gt;&lt;img src="images/ticon.png"&gt;&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  </code></pre>