Conventional Navigation menu and Hamburger menu toggle Jquery

Question

Hi I am making my first website and trying to get something that should be very simple to work but i cant.

So I have a basic navigation menu which is floated to the right of the header. When the screen width goes less than 650px, I want the menu to disappear and the hamburger to show (which is great I have got it)

Problem is when I call the toggle function on the hamburger, it does not refresh when I resize my window to > 650. I have tried everything, I am sure there must be a simple way, here is all my code:

HTML:

<header>
    <div id="headLogo">
        <a href="clhome.php"><img src="images/primLogo2.png" 
alt="Imagehere"></a>
    </div>

    <div id="primHamMenu">
        <a href="#" id="primHamLink">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>

    <div id="headNav">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">CV</a></li>
                <li><a href="#">Lingerie</a></li>
                <li><a href="#">Swim</a></li>
                <li><a href="#">Print</a></li>
                <li><a href="#">Technical</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS:

#primHamMenu{
width: 4em;
margin: 0 auto;
margin-bottom: 1em;
/*display: none;*/
}

#primHamMenu a span{
width: 100%;
border-bottom: 0.16em solid #ffffff;
display: block;
padding: 0.41em;
}

/*----------Prim Nav media queries-------*/

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

#headLogo{
    float: none;
    width: 50%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0;
}

#headNav{
    float: none;
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: auto;
    right: auto;
    margin-top: 2em;
}

#headNav ul{
    width: 90%;
}

}

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

#headLogo{
    width: 75%;
}

#headNav{
    transform: none;
    /*display: none;*/
}

#headNav ul{
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
}

#headNav ul li{
    margin: 1em 0 1em 0;
}

#primHamMenu{
    /*display: block;*/
}

JQuery:

$(document).ready(function () {

var width = $(window).width();

    $(window).resize(function(){

        if(width > 650){
            $("#primHamMenu").hide();
            $("#headNav").show();
        }else{
            $("#primHamMenu").show();
            $("#headNav").hide();
        }

    })

    // toogle headNav
    $("#primHamMenu").click(function(){ 
        $("#headNav").toggle();
    });

})

Everything works mostly except for the toggle function

Any help would be appreciated. Thanks

Answer 1

use matchMedia that right way to do this.

$(document).ready(function () {
   var mq = window.matchMedia("(max-width: 630px)");
       mq.addListener(WidthChange);
       WidthChange(mq);

  function WidthChange(mq) {

    if (mq.matches) {
         $("#primHamMenu").show();
         $("#headNav").hide();
    } else {
       $("#primHamMenu").hide();
       $("#headNav").show();
   }

  }

  $("#primHamMenu").click(function(){
        $("#headNav").toggle();
  });

});

#primHamMenu{
width: 4em;
margin: 0 auto;
margin-bottom: 1em;
/*display: none;*/
}

#primHamMenu a span{
width: 100%;
border-bottom: 0.16em solid #ffffff;
display: block;
padding: 0.41em;
}

/*----------Prim Nav media queries-------*/

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

#headLogo{
    float: none;
    width: 50%;
    margin: 0 auto;
    position: relative;
    margin-bottom: 0;
    padding-bottom: 0;
}

#headNav{
    float: none;
    width: 100%;
    margin: 0 auto;
    position: relative;
    top: auto;
    right: auto;
    margin-top: 2em;
}

#headNav ul{
    width: 90%;
}

}

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

#headLogo{
    width: 75%;
}

#headNav{
    transform: none;
    /*display: none;*/
}

#headNav ul{
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
}

#headNav ul li{
    margin: 1em 0 1em 0;
}

#primHamMenu{
    /*display: block;*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <div id="headLogo">
        <a href="clhome.php"><img src="images/primLogo2.png" 
alt="Imagehere"></a>
    </div>

    <div id="primHamMenu">
        <a href="#" id="primHamLink">
            <span></span>
            <span></span>
            <span></span>
        </a>
    </div>

    <div id="headNav">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">CV</a></li>
                <li><a href="#">Lingerie</a></li>
                <li><a href="#">Swim</a></li>
                <li><a href="#">Print</a></li>
                <li><a href="#">Technical</a></li>
            </ul>
        </nav>
    </div>
</header>