Home > Net >  Checkbox burger menu covering body content
Checkbox burger menu covering body content

Time：11-29

I'm having a problem with my checkbox burger menu dropdown is covering content when clicked. It may also look like the menu itself isn't "connected" to the navbar when clicked.

I have tried changing position to absolute but that creates a hidden problem I can't solve.

My first stackoverflow, and one of my first projects. Thanks for patience and help :)

https://jsfiddle.net/ow82jhbm/1/

@media only screen and (max-width:1111px) {
  #navtekst {
    display: none;
  }
}

#sidebarMenu {
  height: auto;
  /*change here related your menu height*/
  position: fixed;
  overflow: auto;
  width: 100%;
  z-index: 100;
  transform: translateY(-171px);
  /*change here related your menu height*/
}

.main-content-wrapper a {
  width: 100%;
  height: 40px;
  display: block;
  text-align: center;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 0.5px solid white;
  color: whitesmoke;
  text-decoration: none;
}

.sidebarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

input[type="checkbox"]:checked~#sidebarMenu {
  transform: translatey(0);
  top: 50px/*change here related your top menu height*/
}

input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 22px;
  width: 22px;
  right: 20px;
  top: 20px;
  display: none
}


/*Whole spinner*/

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3.5px;
  width: 100%;
  background-color: white;
}


/*Each line in spinner*/

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}


/*Spinner rotation*/

input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

@media screen and (max-width: 1111px) {
  .sidebarIconToggle {
    display: block
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav >
  <!--Brand/logo-->
  <a >
    <img id="logo" alt="Logo" src="TradeLeague-1 (7).png" />
  </a>

  <!--Links-->
  <ul  [class.is-open]="isMenuOpen" style="font-size:18px" id="navtekst">
    <!--Homepage-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/home">  &nbsp;&nbsp;Home</a>
    </li>
    <!--Create company-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/createcompany">  &nbsp;&nbsp;Create Company</a>
    </li>
    <!--Company list-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/companies">  &nbsp;&nbsp;Companies</a>
    </li>
    <!--Leaderboard-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/leaderboard">  &nbsp;&nbsp;Leaderboard</a>
    </li>
  </ul>
  <!--Creating a new list aligned to the right-->
  <ul  style="font-size:18px" id="navtekst">
    <!--Log-in Page-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/login">  &nbsp;&nbsp;Sign-in</a>
    </li>
    <!--Profilepage-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/profile"><i ></i>    Profile</a>
    </li>
  </ul>

  <input type="checkbox"  id="openSidebarMenu">
  <label for="openSidebarMenu" >
        <div ></div>
        <div ></div>
        <div ></div>
    </label>

  <div id="sidebarMenu" >
    <div >
      <a  routerLinkActive="active" routerLink="/home">  &nbsp;&nbsp;Home</a>
      <a  routerLinkActive="active" routerLink="/createuser">  &nbsp;&nbsp;Create User</a>
      <a  routerLinkActive="active" routerLink="/createcompany">  &nbsp;&nbsp;Create Company</a>
      <a  routerLinkActive="active" routerLink="/companies">  &nbsp;&nbsp;Companies</a>
      <a  routerLinkActive="active" routerLink="/leaderboard">  &nbsp;&nbsp;Leaderboard</a>
      <a  routerLinkActive="active" routerLink="/login">  &nbsp;&nbsp;Sign in</a>
      <a  routerLinkActive="active" routerLink="/profile">  &nbsp;&nbsp;Profile</a>
    </div>
  </div>
</nav>
<br/>

<!--HTML EXAMPLE*/-->

<div  style="text-align: center; width: 65%">
  <br />
  <!--Header-->
  <h1><u>Create User</u></h1>
  <br />
  <!--Form for creating new user-->
  <form [formGroup]="skjema" (ngSubmit)="onSubmit()">
    <div >
      <label>Username</label>
      <input  formControlName="username" />
      <p  [hidden]="skjema.controls.username.valid || (skjema.controls.username.pristine && !submitted)">
        Username er obligatorisk.
      </p>
    </div>
    <div >
      <label>Password</label>
      <input  formControlName="password" />
      <p  [hidden]="skjema.controls.password.valid || (skjema.controls.password.pristine && !submitted)">
        Password er obligatorisk.
      </p>
    </div>
    <!--Sends company to script with function createUser() when confirm button is pressed-->
    <div >
      <button type="submit" style="margin-right:15px" [disabled]="!skjema.valid" >Registrer</button>
      <button  routerLink="/">Tilbake</button>
    </div>
  </form>
</div>

CodePudding user response：

Typically, this is done using JS and targets the same menu instead of using two.

With your current structure, you can make this work by first changing #sidebarMenu to position: absolute;. Then target input[type="checkbox"]:checked~#sidebarMenu and use top: 100%; to make sure your menu is appearing directly below the navbar. Make sure you remove the translateY value in those styles.

Next, to get the dropdown menu to push down the other content you will have to use position: relative; on input[type="checkbox"]:checked~#sidebarMenu. This enables the menu to push down and extend the actual navbar height. I used flex to re-configure the alignment of your nav on mobile.

@media only screen and (max-width:1111px) {
  #navtekst {
    display: none;
  }
}

#sidebarMenu {
  height: auto;
  /*change here related your menu height*/
  position: absolute;
  display: none;
  width: 100%;
  z-index: 100;
  transform: translateY(-171px);
  /*change here related your menu height*/
}

.main-content-wrapper a {
  width: 100%;
  height: 40px;
  display: block;
  text-align: center;
  font-size: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 0.5px solid white;
  color: whitesmoke;
  text-decoration: none;
}

.sidebarMenuInner {
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

input[type="checkbox"]:checked~#sidebarMenu {
  transform: translatey(0);
  position: relative;
  top: 100%/*change here related your top menu height*/
  ;
  left: 0;
  display: block;
  padding-top: 1em;
}

input[type=checkbox] {
  transition: all 0.3s;
  box-sizing: border-box;
  display: none;
}

.sidebarIconToggle {
  transition: all 0.3s;
  box-sizing: border-box;
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 22px;
  width: 22px;
  right: 20px;
  top: 20px;
  display: none
}


/*Whole spinner*/

.spinner {
  transition: all 0.3s;
  box-sizing: border-box;
  position: absolute;
  height: 3.5px;
  width: 100%;
  background-color: white;
}


/*Each line in spinner*/

.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}

.diagonal.part-1 {
  position: relative;
  transition: all 0.3s;
  box-sizing: border-box;
  float: left;
}

.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  position: relative;
  float: left;
  margin-top: 3px;
}


/*Spinner rotation*/

input[type=checkbox]:checked~.sidebarIconToggle>.horizontal {
  transition: all 0.3s;
  box-sizing: border-box;
  opacity: 0;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-1 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(135deg);
  margin-top: 8px;
}

input[type=checkbox]:checked~.sidebarIconToggle>.diagonal.part-2 {
  transition: all 0.3s;
  box-sizing: border-box;
  transform: rotate(-135deg);
  margin-top: -9px;
}

@media screen and (max-width: 1111px) {
  .sidebarIconToggle {
    display: block
  }
  .navbar {
    flex-flow: column !important;
  }
  .navbar-brand {
    width: 99%;
  }
}

@media only screen and (min-width: 1111px) {
  #sidebarMenu {
    display: none !important;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<nav >
  <!--Brand/logo-->
  <a >
    <img id="logo" alt="Logo" src="TradeLeague-1 (7).png" />
  </a>

  <!--Links-->
  <ul  [class.is-open]="isMenuOpen" style="font-size:18px" id="navtekst">
    <!--Homepage-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/home">  &nbsp;&nbsp;Home</a>
    </li>
    <!--Create company-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/createcompany">  &nbsp;&nbsp;Create Company</a>
    </li>
    <!--Company list-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/companies">  &nbsp;&nbsp;Companies</a>
    </li>
    <!--Leaderboard-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/leaderboard">  &nbsp;&nbsp;Leaderboard</a>
    </li>
  </ul>
  <!--Creating a new list aligned to the right-->
  <ul  style="font-size:18px" id="navtekst">
    <!--Log-in Page-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/login">  &nbsp;&nbsp;Sign-in</a>
    </li>
    <!--Profilepage-->
    <li >
      <!--Routering and displaying active page-->
      <a  routerLinkActive="active" routerLink="/profile"><i ></i>    Profile</a>
    </li>
  </ul>

  <input type="checkbox"  id="openSidebarMenu">
  <label for="openSidebarMenu" >
        <div ></div>
        <div ></div>
        <div ></div>
    </label>

  <div id="sidebarMenu" >
    <div >
      <a  routerLinkActive="active" routerLink="/home">  &nbsp;&nbsp;Home</a>
      <a  routerLinkActive="active" routerLink="/createuser">  &nbsp;&nbsp;Create User</a>
      <a  routerLinkActive="active" routerLink="/createcompany">  &nbsp;&nbsp;Create Company</a>
      <a  routerLinkActive="active" routerLink="/companies">  &nbsp;&nbsp;Companies</a>
      <a  routerLinkActive="active" routerLink="/leaderboard">  &nbsp;&nbsp;Leaderboard</a>
      <a  routerLinkActive="active" routerLink="/login">  &nbsp;&nbsp;Sign in</a>
      <a  routerLinkActive="active" routerLink="/profile">  &nbsp;&nbsp;Profile</a>
    </div>
  </div>
</nav>
<br/>

<!--HTML EXAMPLE*/-->

<div  style="text-align: center; width: 65%">
  <br />
  <!--Header-->
  <h1><u>Create User</u></h1>
  <br />
  <!--Form for creating new user-->
  <form [formGroup]="skjema" (ngSubmit)="onSubmit()">
    <div >
      <label>Username</label>
      <input  formControlName="username" />
      <p  [hidden]="skjema.controls.username.valid || (skjema.controls.username.pristine && !submitted)">
        Username er obligatorisk.
      </p>
    </div>
    <div >
      <label>Password</label>
      <input  formControlName="password" />
      <p  [hidden]="skjema.controls.password.valid || (skjema.controls.password.pristine && !submitted)">
        Password er obligatorisk.
      </p>
    </div>
    <!--Sends company to script with function createUser() when confirm button is pressed-->
    <div >
      <button type="submit" style="margin-right:15px" [disabled]="!skjema.valid" >Registrer</button>
      <button  routerLink="/">Tilbake</button>
    </div>
  </form>
</div>

Page link：https//www.codepudding.com/net/625383.html

Prev:How to make this code work with multiple sticky navbars on the same page?
Next:Keep body bg fixed while child elements scroll
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding