Support » Themes » Order of dropdown-menu on responsive version of theme

  • Gelöst tfcgomy

    (@tfcgomy)


    Hello,

    I use the theme phosphor (and it’s great!), there is just one problem I could not find a solution:

    When looking on the template on an android handy, there is a dropdown-menu „Select a page“.

    Is there a way to change the order of the pages in the box, and also to leave some pages away, so that the are not shown in this menu?

    Thanks in advance and best regards

    Petra

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Hi Petra,

    is there any particular reason, you ask your question in English?
    Your thread appeared in the German support forums. If you want to discuss your topic in English, you can post your thread on https://wordpress.org/forums but you might have more luck in the support forum dedicated to that theme.

    Perhaps it already helps, if you create a custom menu (Appearance > Menus)?

    Edi

    (@psychosopher)

    The dropdwon menu on a smartphone uses the same structure as the navigation bar on a desktop screen. The items can be selected and the order changed at „Appereance“ > „Menus“.

    Edi

    (@psychosopher)

    @bego Sorry. 😉

    Deutsch ist mir deutlich lieber 🙂 Aber ich dachte, in Englisch besteht mehr Chance auf Antwort, weil es mehr Leute lesen…

    Erstmal danke für die Antworten!

    Die Anfrage unter „support forum dedicated to that theme“ hatte ich auch gefunden (hab bestimmt eine halbe Stunde die Foren durchsucht), aber da gab es ja leider keine Antwort darauf.

    Wenn ich das Menü unter Appearance > Menues ändere, würde es sich ja am großen Monitor auch ändern, oder? Es sollte sich aber nur am Handy ändern (da ist die Reihenfolge alphabetisch statt so wie am Monitor, und zwei Seiten dienen nur der Optik am Monitor und sollten am Handy gar nicht erst erscheinen).

    Danke und LG
    Petra

    Moderator PraetorIM

    (@praetorim)

    Auf einem normalen Bildschirm passen eine Reihe von Menüpunkten nebeneinander. Mehr als auf einen Handy-Bildschirm (jedenfalls, wenn man dem mobilen Besucher nicht zumuten will, die ansonsten „klitzekleine“ Schrift des Menues hochzoomen zu müssen). Daher tauscht das Theme die auf dem Desktop benutzte Menüzeile gegen ein Dropdown-Menü aus. Das ändert aber nichts daran, dass es sich um das gleiche Menü handelt wie auf dem Desktop (und das im Administrationsbereich unter Design > Menü bearbeitet werden kann).

    So ungefähr habe ich mir das vorgestellt, aber da die Reihenfolge der Menüpunkte am Desktop ja eine andere ist als am Handy, hatte ich die Hoffnung, dass es genau dafür zuuuufällig 🙂 ein Plugin gibt, das es erlaubt, die Reihenfolge für die responsive Anzeige anzupassen (unter Design > Menü kann ich zwar die Reihenfolge der Menüpunkte angeben, aber am Handy wird sie ja nicht angezeigt, sondern immer alphabetisch)…

    Ich habe gerade ins das Theme reingeschaut. Die Navigation wird folgendermaßen aufgerufen (ich habe den Code etwas gekürzt, damit es übersichtlicher ist):

    <nav id="site-navigation" class="main-navigation" role="navigation">
      <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
    </nav><!-- #site-navigation -->
    
    <nav id="mobile-navigation" class="mobile-navigation">
      <?php
        wp_nav_menu(
          array(
            'theme_location' => 'primary',
            'fallback_cb'    => 'phosphor_dropdown_pages',
            'items_wrap'     => phosphor_dropdown_nav_wrapper(),
            'walker'         => new Phosphor_Walker_Nav_Menu_Dropdown()
          )
        );
      ?>
    </nav>

    Hier wird also im Prinzip zweimal ein benutzerdefiniertes Menü abgerufen und in ein <nav>-Tag mit unterschiedlichen CSS-Klassen gepackt. Über eine Media Queries wird dann das eine oder andere Menü ausgeblendet.

    @media all and (min-width: 769px) {
      .mobile-navigation {
        display: none;
      }
    }

    Was man doch machen könnte, wäre ein Child Theme anzulegen und in diesem ein weiteres Menü zu definieren:

    register_nav_menus( array(
    		'mobile' => __( 'Mobile Menu', 'phosphor' )
    	) );

    Nun kopiert man die header.php in das Child Theme und passt dort die Ausgabe des Navigationsmenüs für mobile Endgeräte an:

    <?php
        wp_nav_menu(
          array(
            'theme_location' => 'mobile',
            'fallback_cb'    => 'phosphor_dropdown_pages',
            'items_wrap'     => phosphor_dropdown_nav_wrapper(),
            'walker'         => new Phosphor_Walker_Nav_Menu_Dropdown()
          )
        );
      ?>

    Ergebnis ist, dass für mobile Endgeräte ein anderes Menü verwendet werden kann, als für Geräte mit großem Display.

    Hallo Bego,

    das ist ja Wahnsinn, wie Ihr Euch um Anfragen kümmert, 1000 Dank!

    Ich muss zugeben, so auf den ersten Blick bin ich etwas überfordert, aber sobald ich Urlaub habe, werde ich mich mit der Erstellung von Child Themes beschäftigen, sollte doch hinzubekommen sein… 🙂

    Viele Grüße

    Petra

    Ich setze den Thread jetzt mal auf „resolved“, aber wenn noch Fragen sind, meld‘ dich einfach oder starte einen neuen Thread, OK? 🙂

Ansicht von 9 Antworten - 1 bis 9 (von insgesamt 9)
  • Das Thema „Order of dropdown-menu on responsive version of theme“ ist für neue Antworten geschlossen.