Whenever I visit the site, the menu remains hidden.
However, when I resize the page and use the hamburger icon, the menu appears as expected.
Even after resizing the page back to its original size, the menu continues to be visible.
Refreshing the site causes the same problem to occur again.
You can see the issue on my demo page:
I would greatly appreciate your assistance with this matter.
Thank you.
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>
<a href="#">About Us</a>
</li>
<li>
<a href="#">Restaurant</a>
</li>
<li>
<a href="#">Running Sushi</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Photo Gallery</a>
</li>
</ul>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>