Hamburger Menü

sroetheli · 24.10.2022

Hallo miteinander
Ich möchte in Wordpress im Hambueger Menü die Abstände zwischen den Navigationspunkten kleiner einstellen.
Da ich ein Neuling bin im CSS bin, weiss ich nicht wie ich den Code verändern muss das die Abstände in der Mobile Version kleiner Werden, das alle Navigationspunkte auf dem Bildschirm sichtbar sind.
Kann mir jemand weiter helfen?
Besten Dank und einen schönen Abend.
Stefan

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li {
line-height: 1.2em;
height: auto;
padding: 15px 50px;
display: block;
text-align: left;
text-decoration: none;
font-size: 20px;
}

scatello · 24.10.2022

Ein Link zur Seite wäre nicht schlecht.

sroetheli · 24.10.2022

Ja klar:https://www.lernpraxisamsee.com/

Sempervivum · 25.10.2022

Geht es dir denn um die horizontalen Abstände oder die vertikalen?

Was ersteres betrifft, so sehe ich da, dass "Kinder-Jugendliche-Erwachsene" bei schmalem Bildschirm umgebrochen wird. Viel kannst Du da nicht machen weil kein freier Platz da ist. Ich sehe jedoch ein letter-spacing von 1px, das könntest Du auf 0 setzen. Und die Schriftgröße ein wenig verringern.

Bei den vertikalen Abständen sehe ich zunächst ein line-height von 1.6em, das kannst Du auf 1 setzen. Und ein Padding oben und unten, das kannst Du auf 0 setzen. Dann würden die Zeilen vertikal ein ganzes Stück näher zusammen rücken.

sroetheli · 26.10.2022

Sempervivum schrieb:
Geht es dir denn um die horizontalen Abstände oder die vertikalen?

Was ersteres betrifft, so sehe ich da, dass "Kinder-Jugendliche-Erwachsene" bei schmalem Bildschirm umgebrochen wird. Viel kannst Du da nicht machen weil kein freier Platz da ist. Ich sehe jedoch ein letter-spacing von 1px, das könntest Du auf 0 setzen. Und die Schriftgröße ein wenig verringern.

Bei den vertikalen Abständen sehe ich zunächst ein line-height von 1.6em, das kannst Du auf 1 setzen. Und ein Padding oben und unten, das kannst Du auf 0 setzen. Dann würden die Zeilen vertikal ein ganzes Stück näher zusammen rücken.

Danke für deine Tipps, die ich im CSS so eingetragen habe.
Leider ist nichts passiert, auch nach mehrmaligen löschen des Caches auf dem Mobil.
Ich kopiere mal den ganzen CSS Code der als zusätliches CSS im Wordpress eingetragen ist.
Hast du ev. noch ein Tipp an was das liegen könnte?
Besten Dank schon zum voraus.
Stefan

{letter-spacing: 1.5em;}
{background-color: #ffffff;}
p {
font-family: "Arial", Arial, bold300;
font-size:26px;
}
h2,
h3,
h4,
h5,
h6 {
font-family: "Arial", Arial, bold300;
}
h1 {
font-family: „Arial“, Arial, Bold400;
.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li {
line-height: 1em;
height: auto;
padding: 0px 0px;
display: block;
text-align: left;
text-decoration: none;
font-size: 16px;
}
@media only screen and (max-width: 767px) {
html * {
font-family: verdana;
}
}

scatello · 26.10.2022

Wenn man deinen CSS-Code mal ordentlich formatiert, dann sollte dir was auffallen:

CSS:

{ letter-spacing: 1.5em; }    /* Was soll das? */
{background-color: #ffffff;}  /* Was soll das? */
p {
  font-family: "Arial", Arial, bold300;
  font-size:26px;
}
h2, h3, h4, h5, h6 {
   font-family: "Arial", Arial, bold300;
}
h1 {
   font-family: „Arial“, Arial, Bold400;
   .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li {
       line-height: 1em;
       height: auto;
       padding: 0px 0px;
       display: block;
       text-align: left;
       text-decoration: none;
       font-size: 16px;
   }
   @media only screen and (max-width: 767px) {
     html * {
     font-family: verdana;
    }
  }

sroetheli · 26.10.2022

Da ich ein Frischling bin in diesem Bereich, kann ich das nicht richtig beurteilen. Ich glaube diese beiden Zeilen hab ich ganz am Anfang des Projektes hinzugefügt um den Zeichenabstand etwas zu vergössern und die Hintergrundfarbe überall auf weiss zu setzten.
Muss dies anders gemacht werden?

scatello · 26.10.2022

Wenn deine ersten beiden Zeilen für alles gelten sollen, dann schreibe

CSS:

* { letter-spacing: 1.5em; background-color: #ffffff; }

Zu dem anderen Problem, ich sehe ab h1 4x { aber nur 3x }, also fehlt eine schließende Klammer.

Sempervivum · 26.10.2022

Hallo Stefan,
im Prinzip funktioniert das CSS, das Du da hinzu gefügt hast, es wird bloß nicht wirksam, weil Du beim Einfügen einen kleinen Syntaxfehler gemacht hast:

Code:

h1 {
   font-family: „Arial“, Arial, Bold400;
 } /* hier fehlte die schließende Klammer */
 .html_av-overlay-full #top #wrap_all #av-burger-menu-ul li {
     line-height: 1em;
     height: auto;
     padding: 0px 0px;
     display: block;
     text-align: left;
     text-decoration: none;
     font-size: 16px;
 }

Übrigens: Code besser in Code-Tags posten, das kleine Menüsymbol rechts neben dem Landschafts-Icon und dann </>.

sroetheli · 26.10.2022

Wow, vielen Dank...
jetzt sieht es auf dem Mobil gut aus, leider ist auch das Desktop Menü nun kleiner.
Gibt es da einen Code um das Desktop Hamburger Menü grösser darzustellen?

P.S. das begreife icch nicht ganz... welches Zeichen ist das Landschafts-Icon?

Sempervivum · 26.10.2022

Gibt es da einen Code um das Desktop Hamburger Menü grösser darzustellen?

Ja, mit einer Mediaquery kannst Du abhängig von der Bildschirmbreite ein anderes CSS anwenden, siehe z. B. hier:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

welches Zeichen ist das Landschafts-Icon?

Das worauf hier der Pfeil zeigt: