Menu is visible only if use hamburger - html

Question

When I'm on the site the menu is hidden. Then when I resize the page and use the hamburger the menu is showing normally. When I resize the page back the menu is still visible. After refreshing site the problem is repeating.
U see the problem on my demo page:
I'll be really glad if you help me with this.
Thanks.
Code:
body {
min-height: 100%;
}
/* HEADER */
#header {
position: absolute;
top: 0px;
left: 0px;
height: 1000px;
right: 0px;
overflow: hidden;
}
.backgroundheader {
top: 0 !important;
position: relative !important;
height: 350px;
background-color: #333;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
background-image: url("images/bamboo.png"), url("images/bamboo2.png");
background-repeat: no-repeat;
background-size: 560px, 195px;
width: 100%;
min-width: 100%;
background-position: top right, top left
}
.logo {
left: 0 !important;
position: absolute;
height: 200px;
width: 600px;
margin-top: 70px;
box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.8);
background-color: #AB2732;
float: left !important
}
/* HEADER */
/* MENU */
ul {
list-style-type: none;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
padding: 0;
overflow: hidden;
font-size: 220%;
font-family: menu
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 23px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
.vyber {
position: absolute;
background-color: #AB2732;
background-size: 100%;
width: 100%;
height: 100px;
margin-top: 410px;
-webkit-animation-name: example;
/* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s;
/* Safari 4.0 - 8.0 */
animation-name: vysunuti;
animation-duration: 0.8s;
box-shadow: inset -0px 0 40px rgba(0, 0, 0, 0.7);
margin-bottom: 200px;
}
.hamburger {
visibility: hidden;
}
.hamburger-box {
margin-top: 80px;
}
#media screen and (max-width: 1246px) {
ul {
top: 345px;
z-index: 99
}
ul li {
;
background-color: #333;
display: block;
text-align: center;
width: 100%
}
.hamburger {
visibility: visible
}
.hamburger-box {
-webkit-animation: hamburger 0.5s ease-in-out;
animation: hamburger 0.5s ease-in-out;
}
}
#-webkit-keyframes hamburger {
from {
opacity: 0
}
to {
opacity: 1
}
}
#font-face {
font-family: menu;
src: url("fonty/menu.otf");
}
/* MENU */
/* MENU */
<div class="nav" id="header">
<div class="backgroundheader">
<div class="logo"></div>
<div class="simple-ss"></div>
<div id="container">
<div class="navbar-header">
<button style="right: 0 !important; position: absolute;margin-right: 30px;margin-top: 350px;z-index: 10" class="hamburger hamburger--spring navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
<div class="vyber">
<div class=" collapse " id="bs-example-navbar-collapse-1">
<div class="navbar-header">
<ul>
<li>
O nás
</li>
<li>
Restaurace
</li>
<li>
Running sushi
</li>
<li>
Kontakt
</li>
<li>
Fotogalerie
</li>
</ul>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

The hamburger is not your problem.
Here is pseudo code how your website works now:
YOUR PSEUDO CODE
var showMenu = false;
var showButton = false;
if 1246px > windowWidth
showButton = true;
if buttonIsClicked == true
showMenu = !showMenu;
(if it is true it will set to false)
(if it is false it will set to true)
PROBLEM
So you need to show your menu when a user gets on the website.
When the windowWidth is smaller then the 1246px you stop showing the menu and shows the button.
Now when the user disables the menu and make the windowWidth bigger than 1246px you need to enable the menu again. this will look like this in pseudo code.
GOOD PSEUDO CODE
var showMenu = true;
var showButton = false;
if 1246px > windowWidth
showButton = true;
showMenu = false;
if 1246px < windowWidth
showMenu = true;
if buttonIsClicked == true
showMenu = !showMenu;
With this knowledge you should be able to solve your css