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:[email protected]">CONTACT</a></li>
            <li><a href="https://facebook.com/123" target=_blank>FB</a></li>

        </ul>
 </div>

jQuery doesn't override. It only changes. In your case, it applies display:none inline to the element. If your CSS would be stronger than that (say you add !important to the rule in your CSS) it would be stronger but than $.hide() method wouldn't work as only the strongest CSS rule applies. It would technically work (the element would get an inline property of display:none) but it wouldn't apply. What you probably need to do is make a function that could decide on whether the element should or should not be displayed and run that function on page resize event. — tao
– tao, Commented Sep 23, 2016 at 13:08

Code Uniquely · Accepted Answer · 2016-09-23 13:15:18Z

1

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..

edited Sep 23, 2016 at 13:15

answered Sep 23, 2016 at 13:09

Code Uniquely

6,3834 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anna Over a year ago

Thanks for your answer! However, I can't seem to get this to work. Even leaving out the responsive part, just hiding and revealing divs with addClass and removeClass doesn't work for some reason (see edit to my initial post). Any ideas on what i'm doing wrong?

Anna · Accepted Answer · 2016-09-24 13:50:57Z

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:[email protected]">CONTACT</a>
      </li>
      <li id="fb"><a href="https://facebook.com/123" target=_blank>FB</a>
      </li>

  </ul>
</div>

Collectives™ on Stack Overflow

Avoid jQuery overriding CSS in a responsive nav menu

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related