My burger menu always makes some problems and when I try to include it into any page the items on the page get pushed to the bottom. I tried it fixing it with position absolute but it didnt really work out either. I just want my elements to be on the right side of the burger menu and also float left didnt really looked good either.
Here is my code of the burger menu in html
<code>
<body>
<div id=alles>
<div class=schale>
<div class=burger>
<div class=bar>
</div>
</div>
</div>
<div class=seitenbar>
<form>
<div class=buttoncontainer>
<div class=buttonbox>
<i class="fa-regular fa-house"></i> <input class=buttons formaction=homepage.php type=submit value=Home>
</div>
<div class=buttonbox>
<br> <i class="fa-regular fa-key"></i> <input class=buttons formaction=register.php type=submit value=Registrierung>
</div>
<div class=buttonbox>
<br> <i class="fa-regular fa-clipboard-user"></i> <input class=buttons formaction=login.php type=submit value=Login>
</div>
</div>
</form>
</div>
</div>
</body>
</code>
<code>
<body>
<div id=alles>
<div class=schale>
<div class=burger>
<div class=bar>
</div>
</div>
</div>
<div class=seitenbar>
<form>
<div class=buttoncontainer>
<div class=buttonbox>
<i class="fa-regular fa-house"></i> <input class=buttons formaction=homepage.php type=submit value=Home>
</div>
<div class=buttonbox>
<br> <i class="fa-regular fa-key"></i> <input class=buttons formaction=register.php type=submit value=Registrierung>
</div>
<div class=buttonbox>
<br> <i class="fa-regular fa-clipboard-user"></i> <input class=buttons formaction=login.php type=submit value=Login>
</div>
</div>
</form>
</div>
</div>
</body>
</code>
<body>
<div id=alles>
<div class=schale>
<div class=burger>
<div class=bar>
</div>
</div>
</div>
<div class=seitenbar>
<form>
<div class=buttoncontainer>
<div class=buttonbox>
<i class="fa-regular fa-house"></i> <input class=buttons formaction=homepage.php type=submit value=Home>
</div>
<div class=buttonbox>
<br> <i class="fa-regular fa-key"></i> <input class=buttons formaction=register.php type=submit value=Registrierung>
</div>
<div class=buttonbox>
<br> <i class="fa-regular fa-clipboard-user"></i> <input class=buttons formaction=login.php type=submit value=Login>
</div>
</div>
</form>
</div>
</div>
</body>
and the css code of the burger menu
<code>*{
margin: 0;
}
.buttoncontainer{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-left: 0.5vw;
padding-right: 0.5vw;
}
.buttons{
margin-top: 5vh;
margin-bottom: 1vh;
height: auto;
width: auto;
border-radius: 5%;
transition: 0.3s;
border-radius: 1vh;
}
.buttons:hover{
transition: all 0.3s;
color:cadetblue;
background-color: #1c1c21;
}
.schale{
position: relative;
display:flex;
width: 10vw;
min-height: 6vh;
background-color: #1c1c21;
z-index: 0;
}
.burger {
position: relative;
min-height: 2vh;
width: auto;
border-color: red;
padding-top: 0.5vw;
margin-top: 0.5vw;
margin-left: 1vw;
/* transition:all .5s ease-in-out; */
z-index: 0;
}
.bar{
min-height: 0.5vh;
min-width:1vw;
background-color: cadetblue;
border-radius: 5%;
transition: all 0.5s ease-in-out;
border-color: brown;
z-index: 0;
}
.bar::before, .bar::after{
content: "";
position: absolute;
min-height: 0.5vh;
min-width: 1vw;
background-color: cadetblue;
border-radius: 5%;
transition: all 0.5s ease-in-out;
}
.bar::before{
transform: translateY(-1vh);
}
.bar::after{
transform: translateY(1vh);
}
.burger.offen .bar{
transform: translateX(-1.5vw);
background-color:transparent;
background-color: transparent;
}
.burger.offen .bar::before{
transform: rotate(45deg) translate(1vw, -2vh);
}
.burger.offen .bar::after{
transform: rotate(-45deg) translate(1vw, 2vh);
}
.seitenbar{
position: relative;
display: flex;
justify-content: left;
align-content: center;
width: 10vw;
left: -21vw;
height: 94.91vh;
background-color: #1c1c21;
transition: all 0.5s ease-in-out;
z-index: 2;
}
.fa-house{
color:cadetblue;
}
.fa-key{
color:cadetblue;
}
.fa-clipboard-user{
color:cadetblue;
}
</code>
<code>*{
margin: 0;
}
.buttoncontainer{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-left: 0.5vw;
padding-right: 0.5vw;
}
.buttons{
margin-top: 5vh;
margin-bottom: 1vh;
height: auto;
width: auto;
border-radius: 5%;
transition: 0.3s;
border-radius: 1vh;
}
.buttons:hover{
transition: all 0.3s;
color:cadetblue;
background-color: #1c1c21;
}
.schale{
position: relative;
display:flex;
width: 10vw;
min-height: 6vh;
background-color: #1c1c21;
z-index: 0;
}
.burger {
position: relative;
min-height: 2vh;
width: auto;
border-color: red;
padding-top: 0.5vw;
margin-top: 0.5vw;
margin-left: 1vw;
/* transition:all .5s ease-in-out; */
z-index: 0;
}
.bar{
min-height: 0.5vh;
min-width:1vw;
background-color: cadetblue;
border-radius: 5%;
transition: all 0.5s ease-in-out;
border-color: brown;
z-index: 0;
}
.bar::before, .bar::after{
content: "";
position: absolute;
min-height: 0.5vh;
min-width: 1vw;
background-color: cadetblue;
border-radius: 5%;
transition: all 0.5s ease-in-out;
}
.bar::before{
transform: translateY(-1vh);
}
.bar::after{
transform: translateY(1vh);
}
.burger.offen .bar{
transform: translateX(-1.5vw);
background-color:transparent;
background-color: transparent;
}
.burger.offen .bar::before{
transform: rotate(45deg) translate(1vw, -2vh);
}
.burger.offen .bar::after{
transform: rotate(-45deg) translate(1vw, 2vh);
}
.seitenbar{
position: relative;
display: flex;
justify-content: left;
align-content: center;
width: 10vw;
left: -21vw;
height: 94.91vh;
background-color: #1c1c21;
transition: all 0.5s ease-in-out;
z-index: 2;
}
.fa-house{
color:cadetblue;
}
.fa-key{
color:cadetblue;
}
.fa-clipboard-user{
color:cadetblue;
}
</code>
*{
margin: 0;
}
.buttoncontainer{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding-left: 0.5vw;
padding-right: 0.5vw;
}
.buttons{
margin-top: 5vh;
margin-bottom: 1vh;
height: auto;
width: auto;
border-radius: 5%;
transition: 0.3s;
border-radius: 1vh;
}
.buttons:hover{
transition: all 0.3s;
color:cadetblue;
background-color: #1c1c21;
}
.schale{
position: relative;
display:flex;
width: 10vw;
min-height: 6vh;
background-color: #1c1c21;
z-index: 0;
}
.burger {
position: relative;
min-height: 2vh;
width: auto;
border-color: red;
padding-top: 0.5vw;
margin-top: 0.5vw;
margin-left: 1vw;
/* transition:all .5s ease-in-out; */
z-index: 0;
}
.bar{
min-height: 0.5vh;
min-width:1vw;
background-color: cadetblue;
border-radius: 5%;
transition: all 0.5s ease-in-out;
border-color: brown;
z-index: 0;
}
.bar::before, .bar::after{
content: "";
position: absolute;
min-height: 0.5vh;
min-width: 1vw;
background-color: cadetblue;
border-radius: 5%;
transition: all 0.5s ease-in-out;
}
.bar::before{
transform: translateY(-1vh);
}
.bar::after{
transform: translateY(1vh);
}
.burger.offen .bar{
transform: translateX(-1.5vw);
background-color:transparent;
background-color: transparent;
}
.burger.offen .bar::before{
transform: rotate(45deg) translate(1vw, -2vh);
}
.burger.offen .bar::after{
transform: rotate(-45deg) translate(1vw, 2vh);
}
.seitenbar{
position: relative;
display: flex;
justify-content: left;
align-content: center;
width: 10vw;
left: -21vw;
height: 94.91vh;
background-color: #1c1c21;
transition: all 0.5s ease-in-out;
z-index: 2;
}
.fa-house{
color:cadetblue;
}
.fa-key{
color:cadetblue;
}
.fa-clipboard-user{
color:cadetblue;
}
and the javascript part of the menu
<code>const burgerr = document.querySelector(".burger");
var seitenbar = document.querySelector(".seitenbar");
let öffnen = false;
burgerr.addEventListener("click", () =>{
if (öffnen == false) {
burgerr.classList.add("offen");
öffnen = true;
seitenbar.style.left= "0px";
}
else {
burgerr.classList.remove("offen");
öffnen = false;
seitenbar.style.left="-21vw"
}
// if (öffnen==true) {
// alert("test")
// }
}
);
</code>
<code>const burgerr = document.querySelector(".burger");
var seitenbar = document.querySelector(".seitenbar");
let öffnen = false;
burgerr.addEventListener("click", () =>{
if (öffnen == false) {
burgerr.classList.add("offen");
öffnen = true;
seitenbar.style.left= "0px";
}
else {
burgerr.classList.remove("offen");
öffnen = false;
seitenbar.style.left="-21vw"
}
// if (öffnen==true) {
// alert("test")
// }
}
);
</code>
const burgerr = document.querySelector(".burger");
var seitenbar = document.querySelector(".seitenbar");
let öffnen = false;
burgerr.addEventListener("click", () =>{
if (öffnen == false) {
burgerr.classList.add("offen");
öffnen = true;
seitenbar.style.left= "0px";
}
else {
burgerr.classList.remove("offen");
öffnen = false;
seitenbar.style.left="-21vw"
}
// if (öffnen==true) {
// alert("test")
// }
}
);
and here is my html code of the page that I want to have the burger included
<code><body>
<?php
include "menu.php" ?>
<link rel=stylesheet href=dashboard.css>
<div id=alles>
<div id=boxen>
<div id=veranstaltungen class=elemente>
Veranstaltungen
<!-- Alle Veranstaltungen anzeigen können
Anzeige, welche Veranstaltungen im Studiengang noch fehlen
Anzeige, welche Veranstaltungen im Studiengang noch fehlen -->
</div>
<div id=veranstaltungen_fertig class=elemente>
abeschlossene veranstaltungen
</div>
<div id=studiengang class=elemente>
Studiengang
<!-- Die Noten der Studenten anzeigen lassen, in der Form, dass zu jedem Studiengang jedes Modul angezeigt wird -->
</div>
</div>
</div>
</body>
</code>
<code><body>
<?php
include "menu.php" ?>
<link rel=stylesheet href=dashboard.css>
<div id=alles>
<div id=boxen>
<div id=veranstaltungen class=elemente>
Veranstaltungen
<!-- Alle Veranstaltungen anzeigen können
Anzeige, welche Veranstaltungen im Studiengang noch fehlen
Anzeige, welche Veranstaltungen im Studiengang noch fehlen -->
</div>
<div id=veranstaltungen_fertig class=elemente>
abeschlossene veranstaltungen
</div>
<div id=studiengang class=elemente>
Studiengang
<!-- Die Noten der Studenten anzeigen lassen, in der Form, dass zu jedem Studiengang jedes Modul angezeigt wird -->
</div>
</div>
</div>
</body>
</code>
<body>
<?php
include "menu.php" ?>
<link rel=stylesheet href=dashboard.css>
<div id=alles>
<div id=boxen>
<div id=veranstaltungen class=elemente>
Veranstaltungen
<!-- Alle Veranstaltungen anzeigen können
Anzeige, welche Veranstaltungen im Studiengang noch fehlen
Anzeige, welche Veranstaltungen im Studiengang noch fehlen -->
</div>
<div id=veranstaltungen_fertig class=elemente>
abeschlossene veranstaltungen
</div>
<div id=studiengang class=elemente>
Studiengang
<!-- Die Noten der Studenten anzeigen lassen, in der Form, dass zu jedem Studiengang jedes Modul angezeigt wird -->
</div>
</div>
</div>
</body>
and the css code of the page
<code>
#boxen{
display:grid;
border-style: solid;
border-width: 1vw;
border-color:black;
grid-template-columns: auto;
grid-template-rows: 1vw, 1vw, 1vw;
justify-content: center;
}
.elemente{
border-style: solid;
border-width:5vw;
border-color:cornflowerblue;
}
</code>
<code>
#boxen{
display:grid;
border-style: solid;
border-width: 1vw;
border-color:black;
grid-template-columns: auto;
grid-template-rows: 1vw, 1vw, 1vw;
justify-content: center;
}
.elemente{
border-style: solid;
border-width:5vw;
border-color:cornflowerblue;
}
</code>
#boxen{
display:grid;
border-style: solid;
border-width: 1vw;
border-color:black;
grid-template-columns: auto;
grid-template-rows: 1vw, 1vw, 1vw;
justify-content: center;
}
.elemente{
border-style: solid;
border-width:5vw;
border-color:cornflowerblue;
}
Does anybody know how to fix this problem?
(sorry if this post is bad its my first post)
I already tried it with float:left; but it didnt work and position absolute also didnt really workout
New contributor
JackTheDripper is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.