ExrowGe
ExrowGe

Reputation: 47

Menu is visible only if use hamburger

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>
                  <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

Answers (1)

TessavWalstijn
TessavWalstijn

Reputation: 1726

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

Upvotes: 2

Related Questions