Zur Navigation

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

1 krieger98

Hallo,
Ich habe auf meinen Webseiten die Menüs geändert und habe ein Hamburger-Menü eingefügt. Dieses soll nur erscheinen bei einer Bildschirm-Größe kleiner 480 Pixel. Das Menü erscheint aber auch einer Bildschirm-Größe auf dem PC. Was muss ich noch ändern damit das Hamburger-Menü nicht erscheint?
https://www.fahrrad-workshop-sprockhoevel.de/mtb-trekkingrad-workshop.htm

24.07.2021 17:57

2 Jörg Kruse

Du hast noch die alte CSS-Datei im Browser-Cache

Die neue Datei:

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

... wird vom Webserver allerdings mit dem Content-Typ "text/html" ausgegeben, weswegen das darin enthaltene CSS vom Browser ignoriert wird. Korrekt wäre der Content-Typ "text/css".

Da du die CSS-Datei anscheinend in PHP komprimiert ausgibst, benötigst du im betreffenden PHP-Code vermutlich noch so eine HTTP-Header-Anweisung:

header("Content-type: text/css");

24.07.2021 18:27 | geändert: 24.07.2021 18:31

3 krieger98

Zitat von Jörg
Du hast noch die alte CSS-Datei im Browser-Cache

Die neue Datei:

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

... wird vom Webserver allerdings mit dem Content-Typ "text/html" ausgegeben, weswegen das darin enthaltene CSS vom Browser ignoriert wird. Korrekt wäre der Content-Typ "text/css".

Da du die CSS-Datei anscheinend in PHP komprimiert ausgibst, benötigst du im betreffenden PHP-Code vermutlich noch so eine HTTP-Header-Anweisung:

header("Content-type: text/css");

Danke !!
Wo muss ich den Code einfügen?
header("Content-type: text/css");

24.07.2021 19:23

6 Jörg Kruse

In die allererste Zeile, ohne Leerzeichen davor:

<?php header("Content-type: text/css"); ?>

... oder nimm deinen PHP-Code, aus dem Beitrag, den ich verlinkt habe.

... oder nimm den PHP-Code aus der Datei responsive-workshop1.css, denn diese wird komprimiert und mit korrektem Content-Type ausgegeben.

24.07.2021 20:39 | geändert: 24.07.2021 20:40

7 krieger98

Zitat von Jörg
In die allererste Zeile, ohne Leerzeichen davor:

<?php header("Content-type: text/css"); ?>

... oder nimm deinen PHP-Code, aus dem Beitrag, den ich verlinkt habe.

... oder nimm den PHP-Code aus der Datei responsive-workshop1.css, denn diese wird komprimiert und mit korrektem Content-Type ausgegeben.

Ich habe den PHP-Code aus der responsive-workshop1.css gelöscht.
Das Hamburger-Menü erscheint aber immer noch auf dem PC.
https://www.fahrrad-workshop-sprockhoevel.de/

24.07.2021 21:02

8 Jörg Kruse

Ich habe den PHP-Code aus der responsive-workshop1.css gelöscht.

Warum das? Jetzt hat diese Datei auch den falschen Content-Type.

Anscheinend hattest du den PHP-Code eingefügt, damit die Dateien komprimiert werden, wie du in diesem Beitrag geschrieben hattest.

Also füge in beiden CSS-Dateien diesen PHP-Code in die allererste Zeile ein, ohne Leerzeichen davor:

<?php ob_start("ob_gzhandler"); header("Content-type: text/css"); ?>

Dann sollte der Browser den CSS-Code wieder normal verarbeiten.

24.07.2021 21:19 | geändert: 24.07.2021 21:19

9 Jörg Kruse

Noch ein Nachtrag:

Das Hamburger-Menü erscheint aber immer noch auf dem PC.

Du hast den Browser-Cache anscheinend noch nicht geleert. Die Seite ist völlig kaputt, weil der CSS-Code nicht interpretiert wird. Leer mal den Browser-Cache!

24.07.2021 21:27 | geändert: 24.07.2021 21:28

10 Jörg Kruse

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;
    }
}

24.07.2021 22:00 | geändert: 24.07.2021 22:02