Checkbox burger menu covering body content - html

Question

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/bootstrap#4.6.2/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 class="navbar navbar-expand-sm bg-dark navbar-dark text-white">
<!--Brand/logo-->
<a class="navbar-brand">
<img id="logo" alt="Logo" src="TradeLeague-1 (7).png" />
</a>
<!--Links-->
<ul class="navbar-nav" [class.is-open]="isMenuOpen" style="font-size:18px" id="navtekst">
<!--Homepage-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/home"> Home</a>
</li>
<!--Create company-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/createcompany"> Create Company</a>
</li>
<!--Company list-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/companies"> Companies</a>
</li>
<!--Leaderboard-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/leaderboard"> Leaderboard</a>
</li>
</ul>
<!--Creating a new list aligned to the right-->
<ul class="navbar-nav ml-auto" style="font-size:18px" id="navtekst">
<!--Log-in Page-->
<li class="nav-item ">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/login"> Sign-in</a>
</li>
<!--Profilepage-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/profile"><i class="fa fa-user-circle"></i> Profile</a>
</li>
</ul>
<input type="checkbox" class="openSidebarMenu ml-auto" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu" class="bg-dark">
<div class="main-content-wrapper">
<a class="nav-link" routerLinkActive="active" routerLink="/home"> Home</a>
<a class="nav-link" routerLinkActive="active" routerLink="/createuser"> Create User</a>
<a class="nav-link" routerLinkActive="active" routerLink="/createcompany"> Create Company</a>
<a class="nav-link" routerLinkActive="active" routerLink="/companies"> Companies</a>
<a class="nav-link" routerLinkActive="active" routerLink="/leaderboard"> Leaderboard</a>
<a class="nav-link" routerLinkActive="active" routerLink="/login"> Sign in</a>
<a class="nav-link" routerLinkActive="active" routerLink="/profile"> Profile</a>
</div>
</div>
</nav>
<br/>
<!--HTML EXAMPLE*/-->
<div class="container bg-dark card text-white" 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 class="form-group">
<label>Username</label>
<input class="form-control" formControlName="username" />
<p class="alert alert-warning" [hidden]="skjema.controls.username.valid || (skjema.controls.username.pristine && !submitted)">
Username er obligatorisk.
</p>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" formControlName="password" />
<p class="alert alert-warning" [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 class="form-group">
<button type="submit" style="margin-right:15px" [disabled]="!skjema.valid" class="btn btn-primary">Registrer</button>
<button class="btn btn-primary" routerLink="/">Tilbake</button>
</div>
</form>
</div>

Answer 1

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/bootstrap#4.6.2/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 class="navbar navbar-expand-sm bg-dark navbar-dark text-white">
<!--Brand/logo-->
<a class="navbar-brand">
<img id="logo" alt="Logo" src="TradeLeague-1 (7).png" />
</a>
<!--Links-->
<ul class="navbar-nav" [class.is-open]="isMenuOpen" style="font-size:18px" id="navtekst">
<!--Homepage-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/home"> Home</a>
</li>
<!--Create company-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/createcompany"> Create Company</a>
</li>
<!--Company list-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/companies"> Companies</a>
</li>
<!--Leaderboard-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/leaderboard"> Leaderboard</a>
</li>
</ul>
<!--Creating a new list aligned to the right-->
<ul class="navbar-nav ml-auto" style="font-size:18px" id="navtekst">
<!--Log-in Page-->
<li class="nav-item ">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/login"> Sign-in</a>
</li>
<!--Profilepage-->
<li class="nav-item">
<!--Routering and displaying active page-->
<a class="nav-link" routerLinkActive="active" routerLink="/profile"><i class="fa fa-user-circle"></i> Profile</a>
</li>
</ul>
<input type="checkbox" class="openSidebarMenu ml-auto" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner diagonal part-1"></div>
<div class="spinner horizontal"></div>
<div class="spinner diagonal part-2"></div>
</label>
<div id="sidebarMenu" class="bg-dark">
<div class="main-content-wrapper">
<a class="nav-link" routerLinkActive="active" routerLink="/home"> Home</a>
<a class="nav-link" routerLinkActive="active" routerLink="/createuser"> Create User</a>
<a class="nav-link" routerLinkActive="active" routerLink="/createcompany"> Create Company</a>
<a class="nav-link" routerLinkActive="active" routerLink="/companies"> Companies</a>
<a class="nav-link" routerLinkActive="active" routerLink="/leaderboard"> Leaderboard</a>
<a class="nav-link" routerLinkActive="active" routerLink="/login"> Sign in</a>
<a class="nav-link" routerLinkActive="active" routerLink="/profile"> Profile</a>
</div>
</div>
</nav>
<br/>
<!--HTML EXAMPLE*/-->
<div class="container bg-dark card text-white" 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 class="form-group">
<label>Username</label>
<input class="form-control" formControlName="username" />
<p class="alert alert-warning" [hidden]="skjema.controls.username.valid || (skjema.controls.username.pristine && !submitted)">
Username er obligatorisk.
</p>
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" formControlName="password" />
<p class="alert alert-warning" [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 class="form-group">
<button type="submit" style="margin-right:15px" [disabled]="!skjema.valid" class="btn btn-primary">Registrer</button>
<button class="btn btn-primary" routerLink="/">Tilbake</button>
</div>
</form>
</div>