CODEWITHSUNDEEP
htmlcss
Gionata Donati
Gionata Donati

Reputation: 31

Menu disappeared under the cover

my menu has disappeared in Dekstop mode while in phone mode it appears correctly, I do not understand what the problem is. I tried to watch if the "capture" box cover the box menu but I can not figure out how to proceed.

I have a problem that I can not solve for 6 hours now

I have this problem for 6 hours now and I can not solve it Thank you very much for helping.

$(".header__icon-bar").click(function(e){

        $(".header__menu").toggleClass('is-open');
        e.preventDefault();

      });
html,body{height: 100%;}
body{background: #eee;}


/*---------------------------
general
---------------------------*/


.animate{
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.button{display: inline-block;background: #fff; color:#000;padding:15px 30px; border-radius:3px;text-decoration: none; }

.p{line-height: 22px}
/*---------------------------
header
---------------------------*/


.header{background: #333}
.header__logo{color: #fff; float:left;display: block;padding:20px;text-decoration: none;}
.header__menu{float:right;margin:0;padding:0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none;}
.header__menu__item a:hover{background: #000}

.header__icon-bar{display:block;float: right;padding: 20px;display: none;}
.header__icon-bar span{display: block;height:3px; width:30px;background: #fff; margin-bottom: 5px;}

/*---------------------------
Cover
---------------------------*/


.cover{height:70%;
  background-image: url(https://source.unsplash.com/category/technology);
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  background-position: center center;
  position:relative;
}
.cover__filter{background: #000;width:100%;height: 100%;position: absolute;z-index: 0;opacity: 0.5;}
.cover__caption {display: table;height: 100%;width:100%;position: relative;z-index: 1; padding: 0 20px}
.cover__caption__copy{display: table-cell;vertical-align: middle;text-align: center;color: #fff;}


/*---------------------------
Cards
---------------------------*/

.cards{max-width: 1200px; margin: 40px auto;}
.card{width: 30%; margin:0 1.5%;background: #fff;float: left;}
.card__image{width:100%; height: auto;}
.card_copy{padding:5px 20px;}
.card_copy h3{margin-bottom:0}

/*---------------------------
Tablet
---------------------------*/
@media (max-width: 998px){


}

/*---------------------------
Smartphone
---------------------------*/
@media (max-width: 767px){

header{position:fixed; z-index: 100; width: 100%}
.header__icon-bar{display: block;}

.header__menu{width: 100%;height:0px; overflow: hidden;}
.header__menu__item{display: block;}
.is-open{height:300px; overflow: auto;}

/*Cover*/
.cover{height:100%;}

/*Cards*/
.card{width:90%; margin:5%;

}





.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
    <link rel="stylesheet" href="style.css">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>

    <header class="header clearfix">
      <a href="" class="header__logo">Logo</a>
      <a href="" class="header__icon-bar">
        <span></span>
        <span></span>
        <span></span>
      </a>
      <ul class="header__menu animate">
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
      </ul>
    </header>
    <section class="cover">
      <div class="cover__filter"></div>
      <div class="cover__caption">
        <div class="cover__caption__copy">
          <h1>Primary message of the home</h1>
          <h2>Subtitle of the home page</h2>
          <a href="" class="button">Call to action</a>
        </div>
      </div>
    </section>


    <section class="cards clearfix">
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/nature/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/food/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/people/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>
</html>

Upvotes: 1

Views: 80

Answers (2)

Varsha Dhadge
Varsha Dhadge

Reputation: 1751

Hope this works

$(".header__icon-bar").click(function(e){

        $(".header__menu").toggleClass('is-open');
        e.preventDefault();

      });
html,body{height: 100%;}
body{background: #eee;}


/*---------------------------
general
---------------------------*/


.animate{
  -webkit-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}

.button{display: inline-block;background: #fff; color:#000;padding:15px 30px; border-radius:3px;text-decoration: none; }

.p{line-height: 22px}
/*---------------------------
header
---------------------------*/


.header{background: #333}
.header__logo{color: #fff; float:left;display: block;padding:20px;text-decoration: none;}
.header__menu{float:right;margin:0;padding:0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none;}
.header__menu__item a:hover{background: #000}

.header__icon-bar{display:block;float: right;padding: 20px;display: none;}
.header__icon-bar span{display: block;height:3px; width:30px;background: #fff; margin-bottom: 5px;}

/*---------------------------
Cover
---------------------------*/


.cover{height:70%;
  background-image: url(https://source.unsplash.com/category/technology);
  background-size: cover;
  -o-background-size: cover;
  -moz-background-size: cover;
  background-position: center center;
  position:relative;
}
.cover__filter{background: #000;width:100%;height: 100%;position: absolute;z-index: 0;opacity: 0.5;}
.cover__caption {display: table;height: 100%;width:100%;position: relative;z-index: 1; padding: 0 20px}
.cover__caption__copy{display: table-cell;vertical-align: middle;text-align: center;color: #fff;}


/*---------------------------
Cards
---------------------------*/

.cards{max-width: 1200px; margin: 40px auto;}
.card{width: 30%; margin:0 1.5%;background: #fff;float: left;}
.card__image{width:100%; height: auto;}
.card_copy{padding:5px 20px;}
.card_copy h3{margin-bottom:0}

/*---------------------------
Tablet
---------------------------*/
@media (max-width: 998px){


}

/*---------------------------
Smartphone
---------------------------*/
@media (max-width: 767px){

header{position:fixed; z-index: 100; width: 100%}
.header__icon-bar{display: block;}

.header__menu{width: 100%;height:0px; overflow: hidden;}
.header__menu__item{display: block;}
.is-open{height:300px; overflow: auto;}

/*Cover*/
.cover{height:100%;}

/*Cards*/
.card{width:90%; margin:5%;}

}





.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
    <link rel="stylesheet" href="style.css">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

  </head>
  <body>

    <header class="header clearfix">
      <a href="" class="header__logo">Logo</a>
      <a href="" class="header__icon-bar">
        <span></span>
        <span></span>
        <span></span>
      </a>
      <ul class="header__menu animate">
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
        <li class="header__menu__item"><a href="">Item</a></li>
      </ul>
    </header>
    <section class="cover">
      <div class="cover__filter"></div>
      <div class="cover__caption">
        <div class="cover__caption__copy">
          <h1>Primary message of the home</h1>
          <h2>Subtitle of the home page</h2>
          <a href="" class="button">Call to action</a>
        </div>
      </div>
    </section>


    <section class="cards clearfix">
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/nature/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/food/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
      <div class="card">
        <img class="card__image"src="https://source.unsplash.com/category/people/400x260" alt="Nature">
        <div class="card_copy">
          <h3>Title Card</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
      </div>
    </section>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</body>
</html>

Upvotes: 2

Tom
Tom

Reputation: 870

Well when looking at your code, you forgot to close the @media query.

So i think you need to add a } at : 

.card { width:90%, margin:5%

Upvotes: 3

Related Questions