Check Box is not showing hidden NavBar in CSS-CodePudding

I'm trying to use a responsive navbar with CSS, but the check box is not showing the hidden navbar at media queries settings at max-width of 760px, I'm providing the full navigation bar code for you to see where is the prblem, please check my codes at the screen settings I used, I know he is something wrong, but where? I don't know. I'll be gratfull.

#navigationBar {
  width: 100%;
  margin: 80px 0;
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}
#navBarLogo,
#navigationBar ul {
  width: 50%;
  display: flex;
}
#navBarLogo img {
  width: 25%;
}

#navigationBar ul li {
  margin-right: 10%;
  list-style: none;
}
li a {
  text-decoration: none;
  color: aliceblue;
}
li a:hover {
  color: #ea6731;
  transition: 0.5s;
}
@media(max-width:760px){
  #navigationBar {
    width: 100%;
    margin: 50px 0;
    display: block;
  }
  #navBarLogo {
  width: 100%;
  display: block;
  padding: 0;
}
#navigationBar ul {
  display: none;
}

#navBarLogo img {
  width: 15%;
}

.nav-toggle:checked ~ #navigationBar ul{
  width: 100%;
  display: block;
  padding: 0;
}

#navigationBar ul li {
  margin: 0;
  list-style: none;
}
}

<div id="navigationBar">
            <div id="navBarLogo">
                <a href="index.html"><img src="imgs/navBarLogo.png"></a>
            </div>
            <input type="checkbox" />
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="index.html">Portfolio</a></li>
                    <li><a href="index.html">About</a></li>
                    <li><a href="index.html">Contact</a></li>
                </ul>
        </div>

CodePudding user response：

Problems:

Line 50: .nav-toggle:checked ~ #navigationBar ul { should be .nav-toggle:checked ~ ul { removing the #navigationBar.

Why? You cannot select a parent selector from a child element, and the .nav-toggle is a child itself to the #navigationBar.

Line 41: #navigationBar ul { should be just ul { removing the #navigationBar. Same applies on Line 10 #navigationBar ul { to be only ul {

Why? As we fix Line 50 and uses .nav-toggle:checked ~ ul we need to use ul instead of #navigationBar ul as Line 41 will overwrite our styles at line 41 due to its higher priority in CSS Specificity.

PROTIP: I suggest giving that ul a class like menu-items instead of relying on ul selector to avoid any conflicts with other ul in your website

Fully working code:

#navigationBar {
  width: 100%;
  margin: 80px 0;
  display: flex;
  text-align: center;
  justify-content: space-between;
  align-items: center;
}
#navBarLogo,
ul {
  width: 50%;
  display: flex;
}
#navBarLogo img {
  width: 25%;
}

#navigationBar ul li {
  margin-right: 10%;
  list-style: none;
}
li a {
  text-decoration: none;
  color: aliceblue;
}
li a:hover {
  color: #ea6731;
  transition: 0.5s;
}
@media (max-width: 760px) {
  #navigationBar {
    width: 100%;
    margin: 50px 0;
    display: block;
  }
  #navBarLogo {
    width: 100%;
    display: block;
    padding: 0;
  }
  ul {
    display: none;
  }

  #navBarLogo img {
    width: 15%;
  }

  .nav-toggle:checked ~ ul {
    width: 100%;
    display: block;
    padding: 0;
  }

  #navigationBar ul li {
    margin: 0;
    list-style: none;
  }
}

<div id="navigationBar">
  <div id="navBarLogo">
    <a href="index.html"><img src="imgs/navBarLogo.png"></a>
  </div>
  <input type="checkbox"  />
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="index.html">Portfolio</a></li>
    <li><a href="index.html">About</a></li>
    <li><a href="index.html">Contact</a></li>
  </ul>
</div>