how do I move my checkbox in front of my nav bar in html / css?-CodePudding

I am trying to make a check box to check on and off the nav bar, but it floats behind my nav bar, so I can't actually see it. I've tried to play with margins and spacing, but can't seem to get it to work. Eventually, I want to change the nav and header background color to white, but have been playing around with black just to try to get it to appear. If there is also an ability to change the color of the checkbox, that would be incredible too.

Code:

/* general formatting starts here */

:root {
  --gd2-blue: rgb(13, 192, 255);
  --gd2-gray: #a1a1a1;
  --header-color: black;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}


/* navigation styles start here */

#gd2-ventures-logo {
  width: 150px;
  height: auto;
}

header {
  background: var(--header-color);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
  margin-top: -67px;
  height: 97px;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--header-color);
  width: 100%;
  display: none;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: var(--gd2-gray);
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked~nav {
  display: block;
}


/* content styles start here */

.content {
  height: 200vh;
  background-color: var(--gd2-blue);
  font-family: "Aldhabi", serif;
  font-weight: 300;
}

h2 {
  padding-top: 150px;
  color: #ffffff;
  text-align: center;
  font-size: 40px;
}

<header>

  <h1 >
    <img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
  </h1>

  <input type="checkbox" >

  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</header>

<div >
  <h2>GD<sup>2</sup> Ventures</h2>
</div>

CodePudding user response：

Can't see the error to be honest.

/* general formatting starts here */

:root {
  --gd2-blue: rgb(13, 192, 255);
  --gd2-gray: #a1a1a1;
  --header-color: white;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* navigation styles start here */

#gd2-ventures-logo {
  width: 150px;
  height: auto;
}

header {
  background: var(--header-color);
  text-align: center;
  position: fixed;
  width: 100%;
  padding: 2rem 0;
  display: flex;
  justify-content: space-around;
}

nav {
  position: absolute;
  text-align: left;
  top: 100%;
  left: 0;
  background: var(--header-color);
  width: 100%;
  display: none;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: var(--gd2-gray);
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

.nav-toggle:checked ~ nav{
  display: block;
}
/* content styles start here */

.content {
  height: 200vh;
  background-color: var(--gd2-blue);
  font-family: "Aldhabi", serif;
  font-weight: 300;
}

h2 {
  padding-top: 150px;
  color: #ffffff;
  text-align: center;
  font-size: 40px;
}

<header>

    <img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
  
  <input type="checkbox" >
  
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</header>

<div >
  <h2>GD<sup>2</sup> Ventures</h2>
</div>

CodePudding user response：

/* general formatting starts here */

:root {
  --gd2-blue: rgb(13, 192, 255);
  --gd2-gray: #a1a1a1;
  --header-color: black;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* navigation styles start here */

#gd2-ventures-logo {
  width: 150px;
  height: auto;
}

header {
  background: var(--header-color);
  text-align: center;
  position: fixed;
  z-index: 999;
  width: 100%;
  margin-top: -40px;
}

nav {
  text-align: left;
  background: var(--header-color);
  width: 100%;
  display: none;
}

nav ul {
  padding: 0px 0px 10px 10px;
  list-style: none;
}

nav li {
  margin-bottom: 1em;
  margin-left: 1em;
}

nav a {
  color: var(--gd2-gray);
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
}

nav a:hover {
  color: #000;
}

/* content styles start here */

.content {
  height: 200vh;
  background-color: var(--gd2-blue);
  font-family: "Aldhabi", serif;
  font-weight: 300;
}

h2 {
  padding-top: 150px;
  color: #ffffff;
  text-align: center;
  font-size: 40px;
}
.nav-toggle {
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function myFunction() {
  var checkBox = document.getElementById("nav-toggle");
  var text = document.getElementById("nav");
  if (checkBox.checked == true){
    nav.style.display = "block";
  } else {
     nav.style.display = "none";
  }
}
</script>
<header>

  <h1 >
    <img id="gd2-ventures-logo" src="https://lh3.googleusercontent.com/RQ5b6Z9JKq5shKOTrkpM8mdlX3c0N270wCSMB-sCjuyumIXLMsbjQGUS14jmLE31ZJ8EGuFjrg4VAAolUIAnKjqTb6Z2yguvvtemLnNhEF0TGdo42Dtsj5lcsclEXS9GYIbdUWFFADo=w2400" alt="GD2 Ventures Logo">
  <div>
  <input type="checkbox" id="nav-toggle"  onclick="myFunction()">
  </div>
 </h1>
 
  <nav id="nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

</header>

<div >
  <h2>GD<sup>2</sup> Ventures</h2>
</div>

CodePudding user response：

@mubeen - thank you for helping. All that I had to do was play around with the margins in . This allowed me to work with spacing to get everything aligned. I was focusing on the image, but the image was embedded in , so needed to focus there.