title: Make media query take priority over function
body: <p>I am trying to make my navigation bar responsive but I am having issues making an image (our logo) appear and disappear when desired.</p>
  
  <p>First of all the default is that the navigation bar has our standard logo displayed and the alternative one hidden:</p>
  
  <p>Then when moving onto a smaller screen I am using a media query to change the color of the navigation bar, hide one logo, show another logo and add a hamburger menu.</p>
  
  <p>Since I found that clicking the hamburger menu, and viewing the links in block display, the alternative logo sat in the way of the first link. So I used a function to hide it (triggered upon clicking on the hamburger menu)</p>
  
  <p>So far so good, clicking on the hamburger menu toggles the logo appearing and disappearing. However, if you collapse the menu without going to another page the function toggles the logo on again - which is fine until you resize the page and make it larger. Then the logo just sits in the way and isn't made to disappear by the media query. </p>
  
  <p>I have tried using <code>!important</code> tags but honestly at a bit of a loss of how to do this final step. Any feedback would be much appreciated!</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="../Style/Basic Styling.css"/&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="page"&gt;
      &lt;div id="page_container"&gt;
  
  
          &lt;!--Nav Bar  Start --&gt;
          &lt;div class="topnav" id="myTopnav"&gt;
  
  
              &lt;img id="CElogo" src="https://imgur.com/gallery/Zmuzg62" alt="CE logo" title="CE logo" &gt;
              &lt;img id="CElogoNoTextID" class="CElogoNoText" src="https://i.imgur.com/Kr3ACDH.jpg" alt="CE logo No Text" title="CE logo No Text" &gt;
  
              &lt;a href="http://localhost:63342/untitled/Home Page/Blog/Blog.html"&gt;Blog&lt;/a&gt;
              &lt;a href="http://localhost:63342/untitled/Home Page/Pricing/Pricing.html"&gt;Pricing&lt;/a&gt;
  
              &lt;a id="homeNav" class="homeNavClass" href="http://localhost:63342/untitled/Home Page/Climate Edge.html"&gt;Home&lt;/a&gt;
              &lt;a href="javascript:void(0);" class="icon" onclick="myFunction()"&gt;&amp;#9776;&lt;/a&gt;
  
  
              &lt;script&gt;
                  function myFunction() {
                      var x = document.getElementById("myTopnav");
                      if (x.className === "topnav") {
                          x.className += " responsive";
                      } else {
                          x.className = "topnav";
                      }
  
                      var y = document.getElementById("CElogoNoTextID");
                      if (y.style.display === "none" ) {
                          y.style.display = "block";
                      } else {
                          y.style.display = "none";
                      }
  
  
  
  
                  }
  
  
              &lt;/script&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      margin:0;
  }
  #page {
      margin:0;
      background:none;
      overflow:auto;
  }
  #page_container {
      margin:0 0px;
  }
  
  #HeaderImage {
      width: 100%;
  
      line-height:1px;
      z-index: 3;
  }
  
  .topnav {
  
      overflow: hidden;
      width: 100%;
      margin-top: 0%;
      z-index: 2;
      position: absolute;
      background: none;
  
  }
  
  #homeNav{
      display:none; !important
  }
  
  .topnav a {
      float: right;
      color: black;
  
      padding: 25px 16px;
      text-decoration: none;
      z-index: 1;
  
  
      font-family: Lato;
      font-size: 24px;
      font-style: normal;
      font-variant: normal;
      font-weight: 500;
      line-height: 26.4px;
  }
  .topnav a:hover {
      background-color: #ddd;
      color: black;
  }
  
  
  .topnav img {
      width: 130px;
      margin-left: 5px;
      margin-top: 7px;
      position:absolute;
      overflow: auto;
  }
  
  #CElogoNoTextID {
  
      display: none;
  }
  
  .topnav .icon {
      display: none;
  }
  
  #DataToAction {
      width: 30vw;
      margin-left: 35vw;
      margin-right: 35vw;
      margin-top: 5vw;
      position:absolute;    
  }
  
  @media screen and (min-width: 601px)and (max-width: 1000px) {
  
      .topnav a {
          font-size: 16px;
      }
      #DataToAction{
          display:none;
      }
      .topnav img {
         display:none;
      }
      #CElogoNoTextID{
          display: none; !important;
      }
  }
  
  @media screen and (max-width: 600px) {
      #HeaderImage {
          margin-top: 80px;
      }
      #CElogoNoTextID{
          display:block;
          float:left;
          margin-top: 0px;
          width: 90px;
  
      }
      .topnav {
          background: #29ABE2;
      }
      .topnav a {display: none;}
      .topnav a.icon {
          float: right;
          display: block;
      }
      #homeNav{
          float: right;
          display: block;
          color: white;
      }
      .topnav img{
          display: none;
      }
      #DataToAction{
          display:none;
      }
  }
  
  @media screen and  (max-width: 600px) {
      .topnav.responsive {position: relative;}
  
      .topnav.responsive a.icon {
          position: absolute;
          right: 0;
          top: 0;
          color:black;
      }
      .topnav.responsive a {
          float: none;
          display: block;
          text-align: left;
      }
  
      .topnav.responsive a.homeNavClass {
          display: block;
          text-align: left; !important;
      }
  }
  </code></pre>
  
  <p>Please see the jsfiddle <a href="https://jsfiddle.net/dyabLrc7/" rel="nofollow noreferrer">here</a></p>