Bucky Thomas Bucky Thomas - 6 months ago 8
Javascript Question

How to get rid of background when something is clicked

I am new to responsive design and am wondering how can I make the background colour disappear when SPAN is clicked on, my code is below:

HTML CODE

<body>


<span class="menu-trigger">MENU </span>


<nav class = "nav-main">

<ul>
<li>
<a href = "#" class = "nav-item"> HOME</a>
</li>
<li>
<a href = "#" class = "nav-item">ABOUT US </a>
</li>

<li>
<a href = "#" class = "nav-item">PORTFOLIO </a>
</li>

<li>
<a href = "#" class = "nav-item">SERVICES </a>
</li>
<li>
<a href = "#" class = "nav-item">CONTACT US </a>
</li>

</ul>
</nav>
</body>


CSS

@media screen and (max-width: 480px){

.menu-trigger{
display:block;
color:#305782;
background-color: #d5dce4;
padding:10px;
text-align: right;
font-size: 83%;
cursor: pointer;
}

.nav-main {
display:none;
}

.nav-expanded{
display:block;
background-color:none;

}
.nav-main > ul > li{
float:none;
border-bottom: 2px solid #d5dce4;
background-color:black;
}

.nav-main > ul > li:last-child{

border-bottom: none;

}

.nav-main .logo{
display:none;
}

.nav-item:hover {

background-color:forestgreen;

}
}


JQUERY

<script type ="text/javascript">
jQuery( document ).ready(function() {
jQuery(".menu-trigger").click(function(){
jQuery(".nav-main").slideToggle(400, function (){
jQuery(this).toggleClass("nav-expanded").css('display', '');
});

});
});

</script>


JS FIDDLE

https://jsfiddle.net/k4ytvyef/2/
As you will notice when sizing the screen in mobile view the HOME option has a long background how can I get rid of that?

Answer

Adding this under your jQuery code should do the trick.

window.onresize = function() {
  if (window.matchMedia('(max-width: 480px)').matches) {
    jQuery(".nav-main").css("background-color", "inherit");
  } else
    jQuery(".nav-main").css("background-color", "");
    jQuery(".nav-main").css("display", ""); // Display navbar back when you change width 
}