Hallo,
ich überlege gerade ob ich mit meiner Umsetzung der Navigationsleiste auf dem richtigen Weg bin - nicht nur technisch sondern auch logisch/Design oder ob eine andere Herangehensweise sinnvoller ist:
Bei hoher Auflösung soll die Navigationsleiste aus 9 horizontalen Buttons - die alle gleich breit sein sollen und mit dem Kleinerziehen des Browser mitschrumpfen.
Bis zu einer minimalen Auflösung (für Handy/Tablet) und dann soll die Navi-Leiste zu einem Menü-Icon werden mit vertikaler Anordnung - siehe Screenshots.
Die Buttons sollen alle gleich groß sein - trotz unterschiedlicher Wortlängen, das habe ich über die Breite angegeben - aber wie krieg ich es hin, dass sie mitschrumpfen und dabei zueinander gleichgroß bleiben?
Aber vielleicht bin ich ja auch mit der Herangehensweise auf dem Holzweg... Hat jemand die Erleuchtung für mich bitte 
Danke
LG
Andrea
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
<title>LirumLarumL&WCF_AMPERSANDöffelstiel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style4.css">
<link href="https://fonts.googleapis.com/css?family=Maven+Pro" rel="stylesheet">
<input type="checkbox" id="responsive-nav">
<label for="responsive-nav" class="responsive-nav-label"><span>&WCF_AMPERSAND☰</span>Wetter 2018</label>
</head>
<body>
<div class="Kopf"
<header>
<img src="images/xxx1.jpg" class="responsive"</br>
<h1>Titel und Logo2</h1>
</header>
</div>
<div class="Navi">
<nav>
<h2>Men&WCF_AMPERSANDü-Auswahl</h2>
<ul>
<li><a href ="http://www.google.de" class =border1 >Wetter</a></li>
<li><a href ="http://www.google.de" class =border2 >Donnerwetter</a></li>
<li><a href ="http://www.google.de" class =border3 >Blitz und Donner</a></li>
<li><a href ="http://www.google.de" class =border4 >Potzblitz</a></li>
<li><a href ="http://www.google.de" class =border5 >Sonne</a></li>
<li><a href ="http://www.google.de" class =border6 >Regenbogen</a></li>
<li><a href ="http://www.google.de" class =border7 >Hagelk&WCF_AMPERSANDörner</a></li>
<li><a href ="http://www.google.de" class =border8 >Sch&WCF_AMPERSANDäfchenwolken</a></li>
<li><a href ="http://www.google.de" class =border9 >Contact</a></li>
</ul>
</nav>
</div>
<footer>
<p>Impressum/AGBs/Copyright</p>
</footer>
</body>
</html>CSS:
html * {
font-family: "Maven Pro" !important;
}
.responsive {
width: 100%;
height: auto;
}
body {
background-color: black;
}
.Kopf {
color: white;
}
.Navi {
color: white;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
}
nav li {
list-style: none;
margin: 0.5em;
padding: 0;
font-size: 1.5em;
}
nav a {
display: inline-block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
text-align: center;
color: white;
opacity: 0.6;
min-width: 15em;
font-size: 0.5em;
}
nav li[aria-current] a {
opacity: 1.0;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
opacity: 1.0;
}
.border1 {
border: 5px solid red;
}
.border2 {
border: 5px solid orange;
}
.border3 {
border: 5px solid blue;
}
.border4 {
border: 5px solid lightgreen;
}
.border5 {
border: 5px solid lightblue;
}
.border6 {
border: 5px solid yellow;
}
.border7 {
border: 5px solid brown;
}
.border8 {
border: 5px solid lightblue;
}
.border9 {
border: 5px solid pink;
}
/* hide the checkbox and the label */
input#responsive-nav,label.responsive-nav-label {
display: none;
}
/* Declarations for the responsive menu */
@media (max-width: 95em) {
nav ul {
flex-direction: column;
}
nav li {
flex: 1;
font-size: 1em;
}
label.responsive-nav-label {
position: relative;
display: block;
padding: 20px;
background: #222;
cursor: pointer;
color: #fff;
top: 500px;
}
label.responsive-nav-label span {
margin-right: 10px;
}
nav {
position: absolute;
top: -9999px;
padding: 10px;
}
input#responsive-nav[type=checkbox]:checked ~ nav {
position: relative;
top: 0;
}
}