Which CSS3 Selector should i use to make the hamburger menu work?-CodePudding

After suffering like a crazy for 2 days I need to get this menu up and running. I need help please.

When I click on the hamburger menu, nothing happens.

When clicking, the menu is not rotating.

In the Mobile version, the menu is always on display.

That is, the menu is always active.

Which selector should I use or what other css trick should I use please?

Thank you so much in advance!

< this my HTML >

<body>
    
    <header >
        <!-- header menu on the fron-end page-->
            <div >
                <a href="#"><img src="https://localhost/mrbuildbox/buildboxdesafio/assets/images/catdog2.png" alt="" ></a>
            </div>

        <!-- menu hamburger -->
            <input type="checkbox" >
            <div ></div>
        
            <div >
                    <div >

                        <ul id="menu-top-menu" >
                            <li id="menu-item-15" ><a href="https://localhost/mrbuildbox/">Institute</a></li>
                            <li id="menu-item-16" ><a href="https://localhost/mrbuildbox/create-page-test/">who wir are</a></li>
                            <li id="menu-item-17" ><a href="https://localhost/mrbuildbox/faleconosco/">contact us</a></li>
                            <li id="menu-item-28" ><a href="https://localhost/mrbuildbox/category/blog/" aria-current="page">blog</a></li>
                        </ul>

                    </div><!--end <div >-->
            </div><!--end <div >-->
    </header>
    
</body>

{ This is the CSS file }

body {
  background-color: #e7e7e7;
  font-family: Rubik, sans-serif;
  font-weight: 400;
}

/*img logo header*/
.responsive-image {
  width: 100%;
  height: auto;
}

header {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #4527a0;
  padding: 0 25px;
  transition: 0.3s;
}

.logo a {
  display: block;
}

.logo a img {
  display: block;
  width: 100%;
}

.menu-top-menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  float: right;
}

ul#menu-top-menu {
  display: flex;
  justify-content: center;
  flex-direction: row;
  align-items: center;
  z-index: 1;
  transition: 0.5s;
  text-transform: uppercase;
}

ul#menu-top-menu li {
  list-style-type: none;
  /* -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg); */
}

ul#menu-top-menu li a {
  color: #fff;
  text-decoration: none;
  display: block;
  padding: 40px 25px;
  font-size: 16px;
  line-height: 1;
  transition: 0.3s;
}

ul#menu-top-menu li a:hover {
  box-shadow: 0 -5px 0px #fff inset, 500px 0 0 rgba(255, 255, 255, 0.03) inset;
  padding: 35px 25px 45px 25px;
}

.hamburger {
  position: relative;
  width: 30px;
  height: 4px;
  background: #fff;
  border-radius: 10px;
  cursor: pointer;
  z-index: 2;
  transition: 0.3s;
  float: right;
  text-align: right;
  right: 0;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  height: 4px;
  right: 0;
  background: #fff;
  border-radius: 10px;
  transition: 0.3s;
}

.hamburger:before {
  top: -10px;
  width: 20px;
}

.hamburger:after {
  top: 10px;
  width: 25px;
}

.toggle-menu {
  position: absolute;
  width: 30px;
  height: 100%;
  z-index: 3;
  cursor: pointer;
  opacity: 0;
}

.hamburger,
.toggle-menu {
  display: none;
}

/*The rotation behavior should work here, but onclick nothing happens.*/

.menu-top-menu-container input:checked ~ .hamburger {
  background: transparent;
}

/*The rotation behavior should work here, but onclick nothing happens.*/

.menu-top-menu-container input:checked ~ .hamburger:before {
  top: 0;
  transform: rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -o-transform:rotate(-45deg);
  width: 30px;

}

/*The rotation behavior should work here, but onclick nothing happens.*/

.menu-top-menu-container input:checked ~ .hamburger:after {
  top: 0;
  transform: rotate(45deg);
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  -o-transform:rotate(45deg);
  width: 30px;
}

.menu-top-menu-container input:checked ~ .ul#menu-top-menu {
  right: 0;
  box-shadow: -20px 0 40px rgba(0, 0, 0, 0.3);
}

@media screen and (max-width: 992px) {
  .hamburger,
  .toggle-menu {
    display: block;
    float: right;
    align-items: center;
    text-align: right;
  }

  header {
    padding: 10px 20px;
  }

  ul#menu-top-menu {
    justify-content: start;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0px;
    background: #4527a0;
    width: 300px;
    height: 100%;
    padding-top: 65px;
  }

  ul#menu-top-menu li {
    width: 100%;
  }

  ul#menu-top-menu li a {
    padding: 22px;
    font-size: 16px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  }
}

CodePudding user response：

use js for toggling it put this code at the bottom of the html

wrap it with script tag

        const toggle = document.querySelector('.container')
        toggle.style.display = 'block'

        function toggleit() {
            if(toggle.style.display == 'block'){

                toggle.style.display = 'none'

            }
            else{
                toggle.style.display = 'block'

            }
        }

CodePudding user response：

Let's take a look at the first one that's not working and walk through what it's trying to select:

.menu-top-menu-container input:checked ~ .hamburger

This says "select .hamburger class which is a sibling (~) of input:checked which are descendants of .menu-top-menu-container". The question now is: does this match anything in the HTML?

<input type="checkbox" >
<div ></div>
  <div >
    <div >
    ...
    </div>
  </div>
</div>

We see that .hamburger and input:checked are siblings, but they are NOT descendants of .menu-top-menu-container, they are in fact parents (with .container between them).

One solution then would be to move <div > above the .hamburger and input elements, wrapping them:


<div >
  <input type="checkbox" >
  <div ></div>
    <div >
      ...
    </div>
  </div>
</div>

Now 3 out of 4 of your selectors should work... this one will need further correction:

.menu-top-menu-container input:checked ~ .ul#menu-top-menu

it should be:

.menu-top-menu-container input:checked ~ .container > #menu-top-menu