Avoid jQuery overriding CSS in a responsive nav menu

Question

I'm building a responsive website with a top navigation bar. When the window is smaller than 919px, the bar disappears and the MENU button appears (which is normally hidden with {display: none;}). On click, it opens a drop-down menu with a cross that closes the drop-down and brings back the MENU button:

<script>
function myFunction() {
$(document).ready(function(){
    $(".icon").click(function(){
        $(".icon").hide();
        $("#dropdown").show();
    });
});
}
</script>

<script>
function myFunction2() {
$(document).ready(function(){
    $("#cross").click(function(){
        $("#dropdown").hide();
        $(".icon").show();
    });
});
}
</script>

This all works fine in the small version of the website. However, as soon as I've clicked the MENU button at least once and resized the website back to larger than 919px, the button or the dropdown menu (depending on whichever one is open) doesn't disappear any more, unless I refresh the page.

I understand that jQuery's .show()somehow overrides the {display: none;} from my CSS, but I can't figure out how to prevent it. I'll be very thankful for any ideas on how to fix this! I'm new to this and will be really happy to learn a way around this.

EDIT

$(document).ready(function(){
    $("#iconmenulink").click(function(){
		$("#iconmenu").addClass("dropdownnav_hidden");
		$("#dropdown").addClass("dropdownnav_shown");
    });
});

$(document).ready(function(){
    $("#cross").click(function(){
		$("#dropdown").addClass("dropdownnav_hidden");
		$("#iconmenu").addClass("dropdownnav_shown");
    });
});

.dropdownnav_shown {
  display:block;
  position: absolute;
  right: 28px;
  top:29px;
  float:right;
  background-color:white;
  border: 2px solid;
  border-color:#8A2BE2;
  text-decoration: none;
  padding:0;
}

.dropdownnav_hidden {
  display:none;
}


.dropdownnav_shown ul {
	list-style-type: none;
    transition: 0.3s;
    font-family: 'Karla', sans-serif;
	font-weight: bold;
	font-size: 16px;
	color: black;
	padding-left:20px;
	padding-right:10px;
	line-height:150%;
	margin-top:5px;
	margin-bottom:10px;
}

.dropdownnav_shown ul li a {
    text-decoration: none;
	color:black;
	margin-right:10px;
	}

.dropdownnav_shown ul li a:visited {color: black;}
.dropdownnav_shown ul li a:hover {color:#8A2BE2;}



#iconmenu a {
	line-height:100%;
	padding:0;
	vertical-align:bottom;
}


#cross {font-size: 22px;
		text-align:right;
		margin-bottom:5px;
}

#cross a {color: #8A2BE2;
}

<div class="dropdownnav_shown" id="iconmenu">
	<ul> 
    	<li id="iconmenulink"> <a> MENU </a>
        <li>
    </ul>
</div>

<div class ="dropdownnav_hidden" id="dropdown">
	<ul>
    		<li id="cross"> <a href="#cross" onclick="myFunction2()"> × </a></li>
			<li><a href="#recordings">RECORDINGS</a></li>
			<li><a href="#news">NEWS</a></li>
            <li><a href="#cv">CV</a></li>
  			<li><a href="mailto:123@riseup.net">CONTACT</a></li>
            <li><a href="https://facebook.com/123" target=_blank>FB</a></li>

        </ul>
 </div>

Answer 1

So I ended up solving it by using jQuery .hide and .show, but doing so within one <div> rather than hiding one <div> and showing the other. Works fine for all window sizes so far.

.dropdownnav_shown ul {
  list-style-type: none;
  font-family: 'Karla', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: black;
  padding-left: 20px;
  padding-right: 10px;
  line-height: 150%;
  margin-top: 5px;
  margin-bottom: 5px;
}
.dropdownnav_shown ul li a {
  text-decoration: none;
  color: black;
  margin-right: 10px;
}
.dropdownnav_shown ul li a:visited {
  color: black;
}
.dropdownnav_shown ul li a:hover {
  color: #8A2BE2;
}
#cross a:hover,
#iconmenulink a:hover {
  color: black;
}
#cross {
  font-size: 22px;
  text-align: right;
  margin-bottom: 5px;
  display: none;
}
#recordings,
#news,
#cv,
#contact,
#fb {
  display: none;
}
#dropdown {
  display: none;
}

}
@media screen and (max-width: 919px) {
  #dropdown {
    display: block;
    position: absolute;
    right: 28px;
    top: 29px;
    float: right;
    background-color: white;
    border: 2px solid;
    border-color: #8A2BE2;
    text-decoration: none;
    padding: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $("#iconmenulink").click(function() {
      $(this).hide();
      $("#cross, #recordings, #news, #cv, #contact, #fb").show();
    });
  });
</script>

<script>
  $(document).ready(function() {
    $("#cross").click(function() {
      $("#cross, #recordings, #news, #cv, #contact, #fb").hide();
      $("#iconmenulink").show();
    });
  });
</script>

<div class="dropdownnav_shown" id="dropdown">
  <ul>
    <li id="iconmenulink"> <a href="#menu"> MENU </a>
      <li id="cross"> <a href="#cross"> × </a>
      </li>
      <li id="recordings"><a href="#recordings">RECORDINGS</a>
      </li>
      <li id="news"><a href="#news">NEWS</a>
      </li>
      <li id="cv"><a href="#cv">CV</a>
      </li>
      <li id="contact"><a href="mailto:123@riseup.net">CONTACT</a>
      </li>
      <li id="fb"><a href="https://facebook.com/123" target=_blank>FB</a>
      </li>

  </ul>
</div>

Answer 2

Your issue is caused by JQuery .show() which sets an inline style on the element that is shown. Inline styling wins when it comes to CSS precedence rules. So the direct style of "display:none" or display:block being set over-rules your CSS.

If you want the CSS styling to control the responsive layout, try using JQuery to set a class on the element instead of using show() and hide() when its clicked, A class such as 'is_shown' or 'not_shown' could be used so that the additional class is applied (rather than the forcing an inline style).

You can then use CSS rules (and in your existing media queries) to do

.is_shown {
  display:block;
}
.not_shown {
  display:none;
}

in this way the cick only adds or removed the additional CSS class, but your CSS controls the layout and visibility depending of sizes ...

you add replace your .show() and .hide() calls to JQuery with the appropriate .addClass() and .removeClass() instead..