Alles anzeigenalign-self: center;
hier klappt das nicht. Ich mach mal lad mal neu hoch und mach screeshot
Screenshot_20220707_123845.png
Der Brand bzw. könnte auch ein Logo sein soll links vertikal ausgerichtet sein und die Navigation rechts mittig .
Einfach das "align-self" auf "start" setzen.
Edit:
Mach bei deiner nav in der Desktopansicht "flex-direction: colum" weg und setze "align-items: center". Das "align-self: center" beim .brand brauchst du dann nicht mehr.
Ich würde deinen Code aber noch folgendermaßen anpassen:
- Beim script-Tag brauchst du kein "type=text/javascript" angeben.
- Ich würde innerhalb des nav's nur das eigentliche Menü & den Menübutton hineinpacken. Den div komplett weg und das "Logo" über nav innerhalb des headers
- Keinen Link für deinen Menübutton, weil sinnlos! Nimm lieber einen button-Tag.
- Ich persönlich habe Javascript IMMER im head und nutze DOMContentLoaded zur Umsetzung. Script im body mag ich einfach nicht, aber ist nur meine Meinung...
Würde es ungefähr so machen:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="js/script.js" ></script>
<title>new Beginning</title>
</head>
<body>
<header>
<div id="brand">Michael Schlegel</div>
<nav id="menu">
<button type="button">
<span></span>
<span></span>
<span></span>
</button>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Fischen</a></li>
<li><a href="#">Kulinarisches</a></li>
<li><a href="#">Galerie</a></li>
<li><a href="#">Datenschutz</a></li>
</ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
</html>CSS
*
{
margin: 0;
padding: 0;
}
html
{
height: 100%;
}
body
{
height: 100%;
background-color: whitesmoke;
}
#brand
{
/* margin: 20px; */
font-size: 1.2em;
font-weight: bold;
color: aqua;
}
header
{
min-height: 80px;
background-color: rgb(56,54,54);
display: flex;
justify-content: space-between;
align-items: center;
}
#menu
{
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}
#menu>ul
{
display:flex;
}
#menu>ul>li
{
/* height: calc(100% - 64px); */
padding: 30px;
list-style-type: none;
border-bottom: 4px solid transparent;
text-align: center;
}
#menu>ul>li:hover
{
border-bottom: 4px solid purple;
}
#menu>ul>li>a
{
color: white;
text-decoration: none;
font-size: 1em;
font-family: sans-serif;
}
#menu>button
{
position: absolute;
display: none;
width: 30px;
top: 25px;
right: 25px;
cursor: pointer;
}
#menu>button>span
{
height:4px;
width:100%;
background-color: white;
border-radius: 100px;
}
#menu>button>span:nth-child(2)
{
margin: 5px 0;
}
@media(max-width:750px)
{
header
{
flex-direction:column;
}
#brand
{
margin-top: 1rem;
}
#menu
{
flex-direction: column;
width: 100%;
}
#menu>button
{
display: flex;
flex-direction: column;
background-color: transparent;
border: none;
}
#menu>ul
{
display: none;
flex-direction: column;
}
#menu>ul.active
{
display: flex;
}
}JavaScript
document.addEventListener("DOMContentLoaded",() => {
const menu_button = document.querySelector("#menu>button");
const menu_list = document.querySelector("#menu>ul");
menu_button.addEventListener("click",() => {
menu_list.classList.toggle("active");
});
});
