Why I can't hide img or text with another div in hamburger menu?-CodePudding

So, I've created a hamburger menu from tutorial on YouTube and everything works fine! But... when I want to add more "div" it's getting problematic.

    <input type="checkbox" >
    <div ><div></div></div>
    <div >
        <div>
            <div>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="spotify.html">Playlista</a></li>
                    <li><a href="hamster.html">Support</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            
            </div>
        </div>
    </div>
</div>

<div >
    <div >
        <h1>Welcome</h1>
          
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique explicabo obcaecati mollitia tempora esse soluta, est odio magni ea aspernatur.</p>
        <a href="#" >Read more</a>
        
            <div ><img src="1.jpg"></div>
        
    </div>
</div>

This is all i have on HTML. I want to add div "swiper" but everything in this div when I open a hamburger menu is shown up, if I delete the div everything is hided when I click hamburger menu. I copy all css code that I have, I don't know what should I add to hide this div and image when I click on hamburger menu.

    background-color: var(--primary-color);
    color: #fff;
    height: 100vh; /* cała powierzchnia */
    position: relative;

}


.showcase .showcase-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}



.btn {
    display: inline-block;
    border: none;
    background-color: var(--overlay-color);
    color: #fff;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
}

.btn:hover{
    opacity: 0.7;
}

.menu-wrap {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.menu-wrap .toggler {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    cursor: pointer;
    width: 50px;
    height: 50px;
    opacity: 0;

}

.menu-wrap .hamburger{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 60px;
    height: 60px;
    padding: 1rem;
    background: var(--overlay-color);
    display: flex;
    align-items: center;
    justify-content: center;
}


.menu-wrap .hamburger > div {
    position: relative;
    width: 100%;
    height: 2px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-out;
}



/* Top i bottom lines */
.menu-wrap .hamburger > div:before,
 .menu-wrap .hamburger > div:after{
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100%;
    height: 2px;
    background: inherit;
}
/* Moves line down */
.menu-wrap .hamburger > div:after {
    top: 10px;
}

.menu-wrap .toggler:checked   .hamburger > div {
    transform: rotate(135deg);
}

.menu-wrap .toggler:checked   .hamburger > div:before,
.menu-wrap .toggler:checked   .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
}


/* Pokazuje menu */
.menu-wrap .toggler:checked ~ .menu {
    visibility: visible;

}

.menu-wrap .toggler:checked ~ .menu > div {
    transform: scale(1);
    transition-duration: var(--menu-speed);
}

.menu-wrap .menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-wrap .menu > div {
    background: var(--overlay-color);
    border-radius: 50%;
    width: 200vw;
    height: 200vw;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
  transform: scale(0);
    transition: all 0.4s ease;
}

.menu-wrap .menu > div > div {
    text-align: center;
    max-width: 90vw;
    max-height: 100vh;
   /* opacity: 0; */
    transition: opacity 0.4 ease;
}

.menu-wrap .menu > div > div > ul > li {
    list-style: none;
    color: #fff;
    font-size: 1.5rem;
    padding: 1rem;
}

.menu-wrap .menu > div > div > ul > li > a {
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease;
}

-> https://i.stack.imgur.com/ybDE5.png I want this image to be hided.

CodePudding user response：

First off, when providing code use the Snippet inserter in the toolbar to provide a live code sample. Second, when you provide code try to be more careful with your copy paste, you are definitely missing some elements from the code you supplied.

That being said, I get what you were trying to achieve and I was able to fill in the blanks and create a working snippet from what you provided.

The outcome is not polished but I think it's generally what you were intending. However, I think the click area for your menu toggle should be the whole container and not just some of the lines.

:root {
  --primary-color: purple;
  --overlay-color: red;
}

body {
  background-color: var(--primary-color);
  color: #fff;
  height: 100vh;
  /* cała powierzchnia */
  position: relative;
}

.showcase .showcase-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.btn {
  display: inline-block;
  border: none;
  background-color: var(--overlay-color);
  color: #fff;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
}

.btn:hover {
  opacity: 0.7;
}

.menu-wrap {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}

.menu-wrap .toggler {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60px;
  height: 60px;
  padding: 1rem;
  background: var(--overlay-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .hamburger>div {
  position: relative;
  width: 100%;
  height: 2px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease-out;
}


/* Top i bottom lines */

.menu-wrap .hamburger>div:before,
.menu-wrap .hamburger>div:after {
  content: '';
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: inherit;
}


/* Moves line down */

.menu-wrap .hamburger>div:after {
  top: 10px;
}

.menu-wrap .toggler:checked .hamburger>div {
  transform: rotate(135deg);
}

.menu-wrap .toggler:checked .hamburger>div:before,
.menu-wrap .toggler:checked .hamburger>div:after {
  top: 0;
  transform: rotate(90deg);
}


/* Pokazuje menu */

.menu-wrap .toggler:checked~.menu {
  visibility: visible;
}

.menu-wrap .toggler:checked~.menu>div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .menu>div {
  background: var(--overlay-color);
  border-radius: 50%;
  width: 200vw;
  height: 200vw;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: all 0.4s ease;
}

.menu-wrap .menu>div>div {
  text-align: center;
  max-width: 90vw;
  max-height: 100vh;
  /* opacity: 0; */
  transition: opacity 0.4 ease;
}

.menu-wrap .menu>div>div>ul>li {
  list-style: none;
  color: #fff;
  font-size: 1.5rem;
  padding: 1rem;
}

.menu-wrap .menu>div>div>ul>li>a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
}

<div >
  <input type="checkbox" >
  <div ><div></div></div>
  <div >
    <div>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="spotify.html">Playlista</a></li>
        <li><a href="hamster.html">Support</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</div>

<div >
  <div >
    <h1>Welcome</h1>

    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique explicabo obcaecati mollitia tempora esse soluta, est odio magni ea aspernatur.</p>
    <a href="#" >Read more</a>

    <div ><img src="https://via.placeholder.com/600x400"></div>

  </div>
</div>