Hamburger Menü

Diskutiere Hamburger Menü im CSS Forum im Bereich Programmierung; Hallo miteinander Ich möchte in Wordpress im Hambueger Menü die Abstände zwischen den Navigationspunkten kleiner einstellen. Da ich ein Neuling...
S

sroetheli

Member
Beiträge
5
Punkte Reaktionen
0
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;
}
 

Anhänge

  • IMG_08D1DCF70456-1.jpeg
    IMG_08D1DCF70456-1.jpeg
    228,4 KB · Aufrufe: 3
S

scatello

Well-known member
Beiträge
310
Punkte Reaktionen
22
Ein Link zur Seite wäre nicht schlecht.
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
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.
 
S

sroetheli

Member
Beiträge
5
Punkte Reaktionen
0
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;
}
}
 
S

scatello

Well-known member
Beiträge
310
Punkte Reaktionen
22
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;
    }
  }
 
S

sroetheli

Member
Beiträge
5
Punkte Reaktionen
0
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?
 
S

scatello

Well-known member
Beiträge
310
Punkte Reaktionen
22
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.
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
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 </>.
 
S

sroetheli

Member
Beiträge
5
Punkte Reaktionen
0
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?
 
Thema:

Hamburger Menü

Oben Unten