Reputation: 47
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.
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="#">O nás</a>
</li>
<li>
<a href="#">Restaurace</a>
</li>
<li>
<a href="#">Running sushi</a>
</li>
<li>
<a href="#">Kontakt</a>
</li>
<li>
<a href="#">Fotogalerie</a>
</li>
</ul>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Upvotes: 0
Views: 104
Reputation: 1726
The hamburger is not your problem.
Here is pseudo code how your website works now:
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)
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.
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
Upvotes: 2