Hamburger Menu not displaying on mobile html & CSS3Menu

Question

I am building a new website and I have used the same code for a while on various sites. I am having issues having the hamburger display on mobile devices. I have rebuilt the CSS code for the menu multiple times and I have now figured that I have some code overriding it - whether it is from Bootstrap 3.3.7 or my own CSS for this site. Is my CSS blocking the hamburger switch menu from showing on mobile?

Here is the testing site for this website HTML:

<div class="hnav"><div class="container">
<input type="checkbox" id="css3menu-switcher" class="c3m-switch-input">
<ul id="css3menu1" class="topmenu">
<li class="topmenu"><a href="../index.html">HOME</a></li>
<li class="topmenu"><a href="#">SPA SERVICES</a>
    <ul>
    <li class="subfirst"><a href="../massage.html">MASSAGE</a></li>
    <li><a href="../facials.html">FACIALS</a></li>
    <li><a href="../manipedi.html">MANI/PEDI</a></li>
    <li><a href="../men.html">FOR MEN</a></li>
    <li><a href="../makeup.html">MAKEUP</a></li>
    <li><a href="../browlash.html">BROW & LASH</a></li>
    <li><a href="../waxing.html">WAXING</a></li>
    <li><a href="../wholebody.html">WHOLE BODY</a></li>
</ul></li> 
<li class="topmenu"><a href="../hair.html">HAIR SERVICES</a>
<li class="topmenu"><a href="#">SPECIALS</a>
<ul>
    <li class="subfirst"><a href="../memberships.html">MEMBERSHIPS</a></li>
    <li><a href="../packages.html">PACKAGES</a></li>
</ul></li> 
<li class="topmenu"><a href="../news.html">NEWS</a></li>
<li class="topmenu"><a href="../boutique.html">BOUTIQUE</a></li>
<li class="topmenu"><a href="#">YOUR VISIT</a>
    <ul>
    <li class="subfirst"><a href="../lockers.html">LOCKERS</a></li>
    <li><a href="../lunch.html">LUNCH</a></li>
    <li><a href="../drinks.html">WINE/BEER</a></li>
    <li><a href="../lodging.html">LODGING</a></li>
    <li><a href="../tour.html">VIDEOS AND PHOTOS</a></li>
    <li><a href="../akelagarden.html">AKELA GARDEN</a></li>
</ul></li> 

My CSS that houses the navigation menu:

.hnav{background-color:#6f3b5f; padding-top:1px; padding-bottom:1px; margin-top:15px; font:Cinzel; font-weight:bolder; text-align:center; z-index:99;}

Menu CSS:

ul#css3menu1,ul#css3menu1 ul{   margin:0;list-style:none;padding:0;background-color:#6f3b5f;border-width:0;border-style:solid;border-color:;}
ul#css3menu1 ul{display:none;position:absolute;left:0;top:100%;background-color:#60818f;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;-moz-box-shadow:0
-8px 16px -4px #a18e70 inset;-webkit-box-shadow:0 -8px 16px -4px #a18e70 inset;box-shadow:0 -8px 16px -4px #a18e70 inset;padding:0 7px 7px;}
 ul#css3menu1 li:hover>*{   display:block;}
ul#css3menu1 li{    position:relative;display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1 li:hover{  z-index:1;}
ul#css3menu1{   font-size:0;z-index:999;position:relative;display:inline-block;zoom:1;padding:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;
*display:inline;}
* html ul#css3menu1 li a{   display:inline-block;}
ul#css3menu1>li{    margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{    outline-style:none;}
ul#css3menu1 a{     display:block;vertical-align:middle;text-align:center;text-decoration:none;font:bold
17px Cinzel,serif;color:#000000;cursor:pointer;padding:17px
17px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{     float:none;margin:7px 0 0;}
ul#css3menu1 ul a{  text-align:left;    padding:5px 15px;   background-color:#60818f;   border-radius:0px;
-moz-border-radius:0px;     -webkit-border-radius:0px;  font:Cinzel;
color:#fff;     text-decoration:none;   text-shadow:0 1px 1px #7f6e55;}
 ul#css3menu1 li:hover>a,ul#css3menu1 li a.pressed{     border-style:none;color:#FFFFFF;}
ul#css3menu1 > li.switch{   display:none;cursor:pointer;width:25px;height:20px;padding:17px 20px;}
ul#css3menu1 > li.switch:before{    content:"";position:absolute;display:block;height:4px;width:25px;border-radius:4px;background:#fff;-moz-box-shadow:0 8px #fff, 0 16px #fff;-webkit-box-shadow:0 8px #fff, 0 16px #fff;box-shadow:0 8px #fff, 0 16px #fff;}
ul#css3menu1 > li.switch:hover:before{  background:#FFFFFF;-moz-box-shadow:0 8px #FFFFFF, 0 16px #FFFFFF;-webkit-box-shadow:0 8px #FFFFFF, 0 16px #FFFFFF;box-shadow:0 8px #FFFFFF, 0 16px #FFFFFF;}
.c3m-switch-input{  display:none;}
ul#css3menu1 li:hover>a,ul#css3menu1 li > a.pressed{    border-style:none;color:#FFFFFF;text-decoration:none;}
ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li > a.pressed{  background-color:#6f3b5f;color:#ffffff;text-decoration:none;text-shadow:0
1px 1px #7f6e55;}
ul#css3menu1 li.topmenu>a{  -moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;background-color:#6f3b5f;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;color:#fff;}
ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu > a.pressed{    -moz-box-shadow:inset 0 8px 12px -2px #a18e70;-webkit-box-shadow:inset 0 8px 12px -2px #a18e70;box-shadow:inset 0 8px 12px -2px #a18e70;background-color:#08333d;color:#FFFFFF;} @media screen and (max-width: 965px) {     ul#css3menu1 > li {         position: initial;}
ul#css3menu1 ul .submenu,ul#css3menu1 li > ul {left: 0; right:auto; top: 100%;}     ul#css3menu1 .submenu,ul#css3menu1
ul,ul#css3menu1 .column {       -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;padding-right: 0;width: 100% !important;}
}
 @media screen and (max-width: 964px) {     ul#css3menu1 {      width: 100%;}   ul#css3menu1 > li {         display: none;      position: relative;     width: 100% !important;}    ul#css3menu1 >
li.switch,.c3m-switch-input:checked + ul#css3menu1 > li + li      {display: block;}     ul#css3menu1 > li.switch > label {position:absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;}}

Answer 1

I loaded your test website (looks nice btw) and upon checking the lunch page I inspected element to see the html used I noticed you haven't included hamburger menu in your html at all ? you maybe deleted it by accident or am I on the wrong page ?