Deaktivierung des Responsive Menü in Twenty Twelve

  • Hallo,

    ich benutze das Twenty Twelve Theme und habe festegestellt, dass mein Blog nicht für mobile Nutzer optmiert war, so wie es von google vorgeschrieben ist. Nun habe ich mir ein Plugin runtergeladen (WPTouch). Direkt nach der Aktivierung war der Blog responsive und erfüllt meine Erwartungen auch optimal.

    Das Problem ist nur, dass das Twenty Twelve Theme das primäre Menü bei einer Auflösung von unter 600px (Breite/width) automatisch als Responsive Menü darstellt. Ich benötige diese Funktion nicht und diese macht auch Probleme bei der korrekten Darstellung bei unter 600px width.

    Ich habe selbst bereits nach Lösungen gesucht, fand auch zwei konkrete Empfehlungen auf Englisch:

    1. Hier
    https://github.com/stafmans/stafm…of-TwentyTwelve

    2. Hier:
    http://stackoverflow.com/questions/1468…enty-twelve-the

    Das Problem ist, dass es einfach nicht funktioniert. Ich habe probiert das Menü abzumelden mit deregister in der functions.php
    Dann habe ich mir extra ein Plugin runtergeladen für php Funktionen, habe es dort eingefügt, was auch nicht funktioniert hat.

    Irgendwas mache ich falsch. Vielleicht habe ich den Code an der falschen Stelle in der functions.php eingefügt? Muss ich noch irgendwas beachten, um das Script wegzubekommen? Wäre über eine Antwort echt dankbar!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Es würde auch reichen, wenn ich das Menü per CSS bearbeiten könnte. Das Problem ist nämlich, dass das responsive Menü untereinander angeordent ist, währen das normale primäre Menü nebeneinander angeordnet ist.

    Ich finde aber in der style.css nichts, um das responsive Menü umzugestalten.

  • Google hat es mir so angezeigt. Hast du vielleicht eine Lösung für das Problem mit dem Menü? Danach wäre nämlich der Blog dann auch für mobile Geräte startklar.

  • Vielleicht war der Blog ja responsive, ich hatte es vorher gar nicht ausprobiert, weil ich davon ausgegangen bin. dasss es so ist. Als ich meinen Blog bei Google gesucht habe wurde mir halt die Meldung angezeigt. Auf jeden Fall gefällt mir das WPTouch Plugin sehr gut. Ich habe es auf einen Android Tablet und einem iPhone getestet. Das Problem ist eben nur das Menü, das sich im Desktop Modus aktiviert, wenn die Breite unter 600px ist.

    Nachdem das deregister nicht funktioniert hat habe ich eine Sicherung der functions.php auf meinen Rechner geladen und die Zeile, die ja eigentlich für das Script verantwortlich ist mal komplett in der functions.php auf dem FTP Server gelöscht:

    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140711', true );

    Im Desktop Modus wird weiterhin das Script aktiviert, sobald die Breite weniger als 600px beträgt. Wie kann das sein?

  • Ich kann dir gerade nicht ganz folgen. Du installierst WP Touch, um ein Theme responsive zu machen, was schon responsive ist.

    Jetzt möchtest du das mobile Menü "entfernen" bzw. ändern und änderst dafür die functions.php. Kommt denn das Menü, dass du ändern willst aus dem Theme oder dem Plugin?

    Kannst du hier mal den Link zu deiner Seite posten, damit wir uns das anschauen können?

  • Ich habe das Menü nun per CSS angepasst.

    Um das Responsive Menü zu überschreiben reicht ein !important nicht aus. Daher habe ich das gesamte primäre Menü auf Flex gestellt. Hier mal meine Einstellungen als Beispiel, vielleicht hilft es irgendjemanden ja einmal, der ein ähnliches Problem hat:

    Hiermit habe ich den Button entfernt:

    h3.menu-toggle {
    display: none;
    }

    Mit diesem Code habe ich das Responsive Menü definiert, diese Definition gilt dann gleichzeitig auch für das normale primäre Menü:

    .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    display: flex;
    justify-content: center;
    }

    Entscheident war hier das display:flex , mit justify-content: center ist das Menü dann zentriert

    Dann habe ich noch den Abstand festgelegt:

    .main-navigation li {
    margin-right: 30px;
    }


    Das WPtouch Plugin benutze ich weiterhin, weil ich damit einfacher das Design und die Struktur im mobile mode ändern kann. Der ganze Blog ist nun für mobile Geräte im Desktop Modus und für den Mobil Modus optimiert. Google ist ebenfalls zufrieden.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!