Zur Navigation

Hamburger-Menü erstellt und eingefügt für Menü-Führung auf dem Handy [2]

11 krieger98

Zitat von Jörg
Jetzt stimmt der Content-Type der CSS-Dateien zwar wieder, dafür fehlt jetzt aber der zusätzliche CSS-Code, der den Menü-Button formatiert.

Ganz an das Ende der Datei responsive-1.css einfügen:

#hamburger {
    display: none;
}
@media (max-width:640px) {
    #hamburger {
      display: inline-block;
      margin-top: 10px;
      margin-left: 12px;
      padding: 6px;
      background-color: #d1d1d1;
      border-radius: 3px;
      border-width: 1px;
      border-style: outset;
      border-color: #bbb;
      font-size: 1.2em;
      font-weight: bold;
    }
    #nav-main {
      display: none;
    }
}

Habe die css-Datei wieder ergänzt und die Seiten werden wieder richtig angezeigt. Mit meinem Notepfad-Programm stimmt etwas nicht.
Das Hamburger-Menü wird wieder angezeigt aber es sollte ja nur bei einer Bildschirm-Größe kleiner 480 Pixel erscheinen (Handy) und nicht bei einer Bildschirm-Größe ab 640 Pixel.
Siehe: https://www.fahrrad-workshop-sprockhoevel.de/mtb-trekkingrad-workshop.htm

25.07.2021 09:06

12 Jörg Kruse

Ruf die CSS-Datei mal direkt im Browser auf:

https://www.fahrrad-workshop-sprockhoevel.de/css/responsive-1.css

und drück ggf. die Taste F5, um sie neu zu laden.

Es fehlt ganz am Ende immer noch der von mir in meinem letzten Beitrag gepostete zusätzliche CSS-Code für die Formatierung des Menü-Buttons:

#hamburger {
    display: none;
}
@media (max-width:640px) {
    #hamburger {
      display: inline-block;
      margin-top: 10px;
      margin-left: 12px;
      padding: 6px;
      background-color: #d1d1d1;
      border-radius: 3px;
      border-width: 1px;
      border-style: outset;
      border-color: #bbb;
      font-size: 1.2em;
      font-weight: bold;
    }
    #nav-main {
      display: none;
    }
}

Wenn dieser Code-Abschnitt ganz am Ende in der responsive-1.css enthalten ist, dann sollte der Menü-Button formatiert sein und nur noch unterhalb einer Bilschirmbreite von 640px angezeigt werden (ggf. musst du dazu noch den Browser-Cache leeren)

25.07.2021 09:54 | geändert: 25.07.2021 09:57

13 krieger98

Zitat von Jörg
Jetzt stimmt der Content-Type der CSS-Dateien zwar wieder, dafür fehlt jetzt aber der zusätzliche CSS-Code, der den Menü-Button formatiert.

Ganz an das Ende der Datei responsive-1.css einfügen:

#hamburger {
    display: none;
}
@media (max-width:640px) {
    #hamburger {
      display: inline-block;
      margin-top: 10px;
      margin-left: 12px;
      padding: 6px;
      background-color: #d1d1d1;
      border-radius: 3px;
      border-width: 1px;
      border-style: outset;
      border-color: #bbb;
      font-size: 1.2em;
      font-weight: bold;
    }
    #nav-main {
      display: none;
    }
}
Hallo,
Es klappt jetzt die, css-datei wurde von Notepad falsch abgespeichert.
Nochmals Danke !!!!

25.07.2021 17:26

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]