toggle sidebar not working properly

Question

I am using a quill free theme on the latest wordpress - http://lencos.ro/7greendays/

The site has a sidebar containing the menu, logo and some other info. I would like on mobile to have a classy hamburger button that shows the sidebar on click and then hide it when clicked again. I met some problems along the way and cannot explain why:

1. I added the hamburger button that, once clicked, displays an X to hide the sidebar. The problem is that, if the sidebar is visible and thus the X is visible and I refresh the page, it still displays the X and not the hamburger menu. I would like that, once the site is refreshed to display the hamburger.

2. The second problem is that I cannot get the toggle to work properly for some reason. It shows the sidebar but immediately hides it after. What I would like is for the sidebar to fade in from the right and have around 90% width and height in the center of the screen. I tried multiple options but none worked the way I wanted.

Here is my code so far - the logowrapper is the sidebar:

<div class="spinner-master3" id="menubutton">
    <input type="checkbox" id="spinner-form3" />
    <label for="spinner-form3" class="spinner-spin3">
        <div class="spinner3 diagonal part-1"></div>
        <div class="spinner3 horizontal"></div>
        <div class="spinner3 diagonal part-2"></div>
    </label>
</div>

<div class="logowrapper" id="sidebarleft">
    <div class="logo">
       <img src="wp-content/themes/quill/images/logo.png" alt="" title="" />
    </div><!-- logo -->

    <div class="menu-wrapper">
       <?php ubermenu( 'main' ); ?>
    </div><!-- menu-wrapper -->

    <div class="rezervari">
       <a href="#" class="rezervari-button">REZERVARI</a>
    </div><!-- rezervari -->

    <div class="address">
       <h3>Str. Michael Vais, Nr, 22</h3>
       <h3>Brasov Jud. Brasov</h3>
       <h3 class="phone">0234 112 321</h3>
    </div><!-- address -->
</div><!-- logowrapper -->

The css:

.spinner-master3 * {
    transition:all 0.3s;
    -webkit-transition:all 0.3s;
    box-sizing:border-box;
}

.spinner-master3 {
    position:absolute;
    height:30px;
    width:30px;
    right:20px;
    top:20px;
    display: none;
}

.spinner-master3 input[type=checkbox] {
    display:none;
}

.spinner-master3 label {
    cursor:pointer;
    position:absolute;
    z-index:99;
    height:100%;
    width:100%;
    top:10px;
    left:0;
}

.spinner-master3 .spinner3 {
    position:absolute;
    height:5px;
    width:100%;
    background-color:#fff;
}

.spinner-master3 .diagonal.part-1 {
    position:relative;
    float:left;
}

.spinner-master3 .horizontal {
    position:relative;
    float:left;
    margin-top:6px;
}

.spinner-master3 .diagonal.part-2 {
    position:relative;
    float:left;
    margin-top:6px;
}

.spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .horizontal {
    transform:scale(2,1);
    -webkit-transform:scale(2,1); 
    opacity: 0;
}

.spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .diagonal.part-1 {
    transform:rotate(-135deg);
    -webkit-transform:rotate(-135deg);
    margin-top:10px;
}

.spinner-master3 input[type=checkbox]:checked ~ .spinner-spin3 > .diagonal.part-2 {
    transform:rotate(135deg);
    -webkit-transform:rotate(135deg);
    margin-top:-16px;
}

/* -------------------------------------------------- LOGO -------------------------------------------------- */

.logowrapper{
    width:355px;
    height: 100%;
    position: fixed;
    display: flex;              /* establish flex container */
    flex-direction: column;     /* stack flex items vertically */
    justify-content: center;    /* center items vertically, in this case */
    align-items: center;
    left:0;
    background: #476644 url('images/background-menu.png') no-repeat center center;  
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
    z-index: 1000000;
}

.logo{ 
    height:auto; 
    width:160px; 
    display:block;
    z-index:10; 
    margin: 0 auto 50px;

} 

.logo img{ 
    width:100%; 
} 

@media (max-width: 700px) {
    .logowrapper{
        display:none;

    }

    .spinner-master3 {
        display: block;
    }
}

The script:

<script>$( ".spinner-master3" ).click(function() {
  $( ".logowrapper" ).toggle( "slow", function() {
    // Animation complete.
  });
});</script>

Can anyone please help?

Answer 1

The second problem is caused by event "bubbling". Because you have an input in the div, when you click on the div it fires twice. In order to fix it you can add evt.stopPropagation(); and evt.preventDefault(); to your click() function.

$( ".spinner-master3" ).click(function(evt) {
evt.stopPropagation();
evt.preventDefault();
  $( ".logowrapper" ).toggle( "slow", function() {
    // Animation complete.
  });
});

Or you can simply remove the input from the div and make it hidden.

 <input type="checkbox" id="spinner-form3" />
 <div class="spinner-master3" id="menubutton">
    <label for="spinner-form3" class="spinner-spin3">
        <div class="spinner3 diagonal part-1"></div>
        <div class="spinner3 horizontal"></div>
        <div class="spinner3 diagonal part-2"></div>
    </label>
 </div>


#spinner-form3
{
    display: none;
}

I cannot replicate the first problem on my machine. Maybe try clearing your cache or give better instruction how to replicate the issue.