Hey Leute ich habe eine relativ schöne Navigationsleiste in meinem Projekt implementiert.
Leider schaffe ich im Gegensatz zu dem Text und Images es nicht diese auch für Handys vernünftig aussehen zu lassen.
Meine Vermutung ist ich habe in der Verschachtelung irgendwelche Probleme. Ich schicke hier mal den CSS code vor und nach dem responsiven Teil rein und den Teil in der base.html wo die Navigationsleiste drin ist.
HTML:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Motoreffizienz-Rechner</title>
<link rel="stylesheet" href="{{url_for('static', filename='css/style_rechner.css')}}">
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
</head>
<body>
<nav>
<a href='{{ url_for('ind')}}'><img src="{{ url_for('static', filename='img/blume.png') }}" alt="blume" title='blume'></a>
<div id='navigation'>
<ul>
<li><a href="{{ url_for('ind')}}">Startseite</a></li>
<li><a href="{{ url_for('ziel')}}">Motivation</a></li>
<li><a href="{{ url_for('home')}}">Der Elektromotoreffizienz-Rechner</a></li>
<li><a href="{{ url_for('eig')}}">Eigenmessungs-Modus</a></li>
<li><a href="{{ url_for('imp')}}">Kontakt</a></li>
</ul>
</div>
</nav>Der CSS code wo die Nav leiste toll funktioniert:
Code
nav{
height:60px;
width:auto;
background-color: rgb(212, 207, 207);
position:relative;
text-align: center;
box-shadow: 0px 2px 4px rgba(0,0,0,0.144);
}
nav a img{
height:100px;
position:absolute;
top:50%;
transform:translate(0%,-50%);
margin-left: 550px;
}
#navigation a {
color:rgb(0,0, 0);
padding: 18px ;
font-size: 18px;
display: flex;
justify-content: center;
align-items: center;
border-color: rgb(10, 12, 10);
border-width: 2px;
border-style: solid;
}
#navigation a:hover {
color: rgb(248, 8, 8);
font-size:18px;
}
nav ul li a{
padding:14px;
text-decoration: none;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
ul {
display: flex;
justify-content: center;
align-items: center;
}Und zu guter letzt der nicht laufende responsive Teil:
Code
@media only screen and (max-width: 600px){
body{
display:flex;
flex-flow: row wrap;
}
nav, nav a,footer{
flex:1 100%;
}
img{
height:8em;
width: 13.6em;
padding:8px;
display: flex;
justify-content:left;
align-items:flex-start;
margin-left: 1em;
margin-top: 2em;
}
#logo{
max-width:8em;
font-size:1.5em;
background-color:rgb(55, 194, 50);
}
nav ul {
margin: 0;
padding: 0;
list-style:none;
width:60px;
}
nav li a{
display:block;
}
nav a img{
display:none;
}
#navigation a{
color:rgb(0,0, 0);
padding: 1em ;
display:block;
margin-left: 1em;
display: flex;
justify-content: left;
align-items: flex-start;
border-color: none;
border-width: 0px;
border-style: none;
}
nav{
background-color:rgb(55, 194, 50);
position:relative;
text-align: left;
box-shadow: none;
}
}Vielleicht sieht ja jemand den Bock den ich geschossen habe 
Liebe Grüße
Johann