Mobile Menü erzwingen

  • Gelöst jimbeam88

    (@jimbeam88)


    vor 3 Jahren, 5 Monaten

    Hallo Zusammen,

    leider wird von meinem benutzten Theme Astra mein Ipad nicht als Mobiles Device erkannt. Das führt dazu, dass im Querformat nicht das Mobile Menü (Burger Menü) angezeigt wird und somit Menüpunkte (vom normalen Menü) außerhalb des Bildes sind. (rechts)

    Desweiteren verschwindet auch mein Logo zur Hälfte (links). Ändere ich Einstellungen im Customizer vom Header (z.b. Logo nach rechts schieben) hat das Auswirkungen auf alle Nicht-Mobile Devices. Die Einstellungen im Customizer für Tablets haben auf das Ipad im Querformat leider kein effekt.

    Wie bzw. wo kann ich festlegen, ab wann ein Device als Mobile Device betrachtet wird?

    Vielen Dank im Vorraus!

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)
  • Moderator Hans-Gerd Gerhards

    (@hage)

    vor 3 Jahren, 5 Monaten

    Hallo,
    leider mal wieder: bei einem Blick in unsere FAQ hättest du gesehen, dass wir ohne weitere Infos nur Kaffeesatzleserei betreiben können:

    wenn du dann noch die URL oben einträgst, dann können wir uns das auch zunächst im Frontend ansehen und dir sicher besser helfen.

    Du findest unter Werkzeuge > Websitezustand > Info einen Bericht zur Website. Warte bitte einen Moment bis die Ladeanzeige ganz oben abgeschlossen ist und kopiere dann per Button den Website-Bericht in deine Zwischenablage. Über den Button „Bericht in die Zwischenablage kopieren“ kannst du den Bericht unverändert (bitte mit den Akzentzeichen am Anfang und Ende) einfügen und anschließend hier posten. Evtl. ergeben sich dann weitere Anhaltspunkte, ob und wo das Problem liegt.
    Lies bitte auch noch mal: Bevor du ein neues Thema (Thread) erstellst.

    Viele Grüße
    Hans-Gerd

    Thread-Starter jimbeam88

    (@jimbeam88)

    vor 3 Jahren, 5 Monaten

    Danke für deine Antwort!

    Die URL der Website wird vermutlich niemanden etwas nützen, da sich die Seite noch im Aufbau befindet und ich eine Wartungsseite darüber geschaltet haben.

    Außerdem war ich der Annahme, dass meine Frage: „Wie bzw. wo kann ich festlegen, ab wann ein Device als Mobile Device betrachtet wird?“

    sehr allgemein gehalten ist und sich die Einstellung vielleicht irgendwo global in WordPress versteckt. 

    wp-core

version: 6.1.1
    site_language: de_DE
    user_language: de_DE
    timezone: +00:00
    permalink: /%postname%
    https_status: true
    multisite: false
    user_registration: 0
    blog_public: 1
    default_comment_status: open
    environment_type: production
    user_count: 1
    dotorg_communication: true

wp-paths-sizes

wordpress_path: /homepages/29/d891718386/htdocs/app945728754
    wordpress_size: 56,77 MB (59522943 bytes)
    uploads_path: /homepages/29/d891718386/htdocs/app945728754/wp-content/uploads
    uploads_size: 1,40 MB (1466872 bytes)
    themes_path: /homepages/29/d891718386/htdocs/app945728754/wp-content/themes
    themes_size: 42,09 MB (44131570 bytes)
    plugins_path: /homepages/29/d891718386/htdocs/app945728754/wp-content/plugins
    plugins_size: 94,13 MB (98703078 bytes)
    database_size: 22,72 MB (23822336 bytes)
    total_size: 217,10 MB (227646799 bytes)

wp-active-theme

name: Astra (astra)
    version: 4.0.2
    author: Brainstorm Force
    author_website: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
    parent_theme: none
    theme_features: core-block-patterns, astra_hooks, widgets-block-editor, align-wide, automatic-feed-links, title-tag, post-thumbnails, starter-content, html5, post-formats, custom-logo, customize-selective-refresh-widgets, editor-style, woocommerce, rank-math-breadcrumbs, amp, infinite-scroll, widgets, menus
    theme_path: /homepages/29/d891718386/htdocs/app945728754/wp-content/themes/astra
    auto_update: Aktiviert

wp-themes-inactive (4)

Refresh Blog: version: 1.1.3, author: Refresh Themes, Automatische Aktualisierungen aktiviert
    Twenty Twenty-One: version: 1.7, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert
    Twenty Twenty-Three: version: 1.0, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert
    Twenty Twenty-Two: version: 1.3, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert

wp-mu-plugins (3)

1&1 Managed WordPress: version: 1.1.0, author: 1&1
    1&1 Product Subdomain: version: 1.1.0, author: 1&1
    IONOS Marketplace: version: 1.1.5, author: IONOS

wp-plugins-active (11)

Elementor: version: 3.11.1, author: Elementor.com, Automatische Aktualisierungen aktiviert
    IONOS Assistant: version: 8.4.2, author: IONOS (latest version: 8.4.5), Automatische Aktualisierungen aktiviert
    IONOS Help: version: 2.1.2, author: IONOS (latest version: 2.2.1), Automatische Aktualisierungen aktiviert
    IONOS Journey: version: 1.0.2, author: IONOS, Automatische Aktualisierungen aktiviert
    IONOS Login: version: 2.1.3, author: IONOS (latest version: 2.2.1), Automatische Aktualisierungen aktiviert
    IONOS Navigation: version: 1.0.6, author: IONOS, Automatische Aktualisierungen aktiviert
    IONOS Performance: version: 1.2.3, author: IONOS (latest version: 2.0.2), Automatische Aktualisierungen aktiviert
    Jetpack: version: 11.8.4, author: Automattic, Automatische Aktualisierungen aktiviert
    Maintenance: version: 4.07, author: WebFactory Ltd, Automatische Aktualisierungen aktiviert
    Starter Templates: version: 3.1.24, author: Brainstorm Force, Automatische Aktualisierungen aktiviert
    WPForms Lite: version: 1.8.0.1, author: WPForms, Automatische Aktualisierungen aktiviert

wp-media

image_editor: WP_Image_Editor_GD
    imagick_module_version: Nicht verfügbar
    imagemagick_version: Nicht verfügbar
    imagick_version: Nicht verfügbar
    file_uploads: File uploads is turned off
    post_max_size: 128M
    upload_max_filesize: 128M
    max_effective_size: 128 MB
    max_file_uploads: 20
    gd_version: 2.2.5
    gd_formats: GIF, JPEG, PNG, WebP, BMP, XPM
    ghostscript_version: 9.27

wp-server

server_architecture: Linux 4.4.302-icpu-088 x86_64
    httpd_software: Apache
    php_version: 7.4.33 64bit
    php_sapi: cgi-fcgi
    max_input_variables: 1000
    time_limit: 30
    memory_limit: 1024M
    max_input_time: -1
    upload_max_filesize: 128M
    php_post_max_size: 128M
    curl_version: 7.64.0 OpenSSL/1.1.1n
    suhosin: false
    imagick_availability: false
    pretty_permalinks: true
    htaccess_extra_rules: true

wp-database

extension: mysqli
    server_version: 10.6.10-MariaDB-1:10.6.10+maria~deb10-log
    client_version: mysqlnd 7.4.33
    max_allowed_packet: 67108864
    max_connections: 3000

wp-constants

WP_HOME: https://hundehotels.net/
    WP_SITEURL: https://hundehotels.net/
    WP_CONTENT_DIR: /homepages/29/d891718386/htdocs/app945728754/wp-content
    WP_PLUGIN_DIR: /homepages/29/d891718386/htdocs/app945728754/wp-content/plugins
    WP_MEMORY_LIMIT: 40M
    WP_MAX_MEMORY_LIMIT: 1024M
    WP_DEBUG: false
    WP_DEBUG_DISPLAY: true
    WP_DEBUG_LOG: false
    SCRIPT_DEBUG: false
    WP_CACHE: false
    CONCATENATE_SCRIPTS: undefined
    COMPRESS_SCRIPTS: undefined
    COMPRESS_CSS: undefined
    WP_ENVIRONMENT_TYPE: Nicht definiert
    DB_CHARSET: utf8
    DB_COLLATE: undefined

wp-filesystem

wordpress: writable
    wp-content: writable
    uploads: writable
    plugins: writable
    themes: writable
    mu-plugins: writable

jetpack

site_id: 215585825
    ssl_cert: No
    time_diff: undefined
    version_option: 11.8.4:1676537232
    old_version: 11.8.3:1676407717
    public: Public
    master_user: #1 jim_beam
    current_user: #1 jim_beam
    tokens_set: Blog User
    blog_token: !GL^Mbx3xuJtK!x4RYQjtOaL9YbPk6Gn
    user_token: tJRy4yScg0ZN%^lLX0DcnaG#!oqdzLWl
    version: 11.8.4
    jp_plugin_dir: /homepages/29/d891718386/htdocs/app945728754/wp-content/plugins/jetpack/
    plan: free
    protect_header: {"trusted_header":"REMOTE_ADDR","segments":1,"reverse":false}
    full_sync: {"started":"Mon, 13 Feb 2023 21:56:28 +0000","finished":"Mon, 13 Feb 2023 21:56:32 +0000","progress":{"comments":{"total":"1","sent":1,"finished":true,"last_sent":"1"},"constants":{"finished":true},"functions":{"finished":true},"options":{"finished":true},"posts":{"total":"21","sent":21,"finished":true,"last_sent":"1"},"term_relationships":{"total":"13","sent":13,"finished":true,"last_sent":{"object_id":"1","term_taxonomy_id":"1"}},"terms":{"total":"3","sent":3,"finished":true,"last_sent":"1"},"themes":{"finished":true},"updates":{"finished":true},"users":{"total":"1","sent":1,"finished":true,"last_sent":"1"}},"config":{"comments":1,"constants":1,"functions":1,"options":1,"posts":1,"term_relationships":1,"terms":1,"themes":1,"updates":1,"users":1}}
    sync_size: undefined
    sync_lag: 0 seconds
    full_sync_size: undefined
    full_sync_lag: 0 seconds
    idc_urls: {"home":"https:\/\/hundehotels.net\/","siteurl":"https:\/\/hundehotels.net\/","WP_HOME":"https:\/\/hundehotels.net\/","WP_SITEURL":"https:\/\/hundehotels.net\/"}
    idc_error_option: false
    idc_optin: true
    cxn_tests: All Pass.

wpforms

version: 1.8.0.1
    lite: Feb 13, 2023 @ 10:18pm
    upload_dir: Beschreibbar
    total_forms: 1
    total_submissions: undefined
    Moderator Hans-Gerd Gerhards

    (@hage)

    vor 3 Jahren, 5 Monaten

    Hallo,

    Außerdem war ich der Annahme, dass meine Frage: „Wie bzw. wo kann ich festlegen, ab wann ein Device als Mobile Device betrachtet wird?“ sehr allgemein gehalten ist und sich die Einstellung vielleicht irgendwo global in WordPress versteckt.

    Eher nicht: In der Regel findet man unter Design > Customizer entsprechende Einstellungen. Auf der folgenden Doku-Seite von Astra findest du vermutlich Hinweise zur Lösung des Problems.

    Viele Grüße
    Hans-Gerd

    Thread-Starter jimbeam88

    (@jimbeam88)

    vor 3 Jahren, 5 Monaten

    Das ist was ich suchte:

    How to change the tablet breakpoint in Astra

    Having said that, let’s get to the point. How do I change this happy, forgiving, famous breaking point? Well, with a little bit of code, that as always we must add at the end of the functions.php file of our Astra’s child theme.

    In case we want to change the breakpoint for tablets the code would be like this:

    // Change breakpoint tablets
    add_filter( ‚astra_tablet_breakpoint‘, function() {
    return 768;
    });

    Vielen Dank!

    • Diese Antwort wurde vor 3 Jahren, 5 Monaten von jimbeam88 geändert.
    • Diese Antwort wurde vor 3 Jahren, 5 Monaten von jimbeam88 geändert.
    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 3 Jahren, 5 Monaten

    Bist du die Einstellungen in Design > Customizer > Header-Builder durchgegangen? Hier kannst du die Sichtbarkeit für verschiedene Geräteauflösungen einstellen. Das „Mobile-Menü“ wird hier „Off-Canvas-Menü“ (1) genannt (weil es sich außerhalb des üblicherweise sichtbaren Bereichs befindet und eingeschoben wird).

    Screenshot
    Zum Vergrößern bitte anklicken …

    Unten kannst du die Darstellung auf einem Tablet simulieren (2) und dann prüfen, ob das Off-Canvas-Menü zugewiesen wurde (3) und der Umschaltbutton gesetzt wurde (4). Dem Menübereich des Off-Canvas-Menü musst du ein (ggf. im Umfang reduziertes) Menü zuweisen.

    Die gleichen Einstellungen gehst du für das Primäre Menü durch, wobei du dazu links unten (2) das Icon für Desktop-Bildschirme aktivieren musst. In den Einstellungen kannst du unter Visibility das Primäre Menü auf Desktop-Bildschirme begrenzen.

    Thread-Starter jimbeam88

    (@jimbeam88)

    vor 3 Jahren, 5 Monaten

    Ja ich bin alle Einstellungen im Customizer durchgegangen. Die Einstellungen da beziehen sich allerdings leider auf das Tablet Hochkant. Da erscheint auch das Hamburger Menü und es wird ein mobiles Gerät erkannt. Im Querformat klappt das allerdings nicht.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 3 Jahren, 5 Monaten

    Das Theme ist auch nicht darauf ausgerichtet, verschiedene Gerätetypen zu erkennen und die Gestaltung darauf abzuzielen. Statt dessen werden mit Media-Queries unterschiedliche CSS-Regeln für Bildschirmelemente verwendet. Sinngemäß sowas wie …

    @media screen and (max-width: 600px) {
  .off-canvas-menu-button{
    display: block;
  }
}
@media screen and (min-width: 601px) {
  .off-canvas-menu-button{
    display: none;
  }
}

    womit ein Hamburger-Menübutton bei Displays mit einer Breite bis zu 600px angezeigt wird, darüber nicht mehr. Kippst du dein Tablet in Landscape-Mode, hast du eine höhere Auflösung und der Hamburger-Menübutton wird nicht mehr angezeigt. Die Display-Icons im Customizer simulieren auch nur Bildschirmbreiten, nicht Gerätetypen.

    Die Mediaquery zu verändern ist sicherlich ein möglicher Ansatz. Ein Desktop-Menü darf allerdings nicht auf zu kleinen Bildschirmen gezeigt werden, weil du sonst von Google den Hinweis bekommst, dass die Webseiten auf mobilen Endgeräten schlecht zu bedienen sind, was wiederum zu einem schlechteren Ranking führt.

Ansicht von 7 Antworten – 1 bis 7 (von insgesamt 7)

Das Thema „Mobile Menü erzwingen“ ist für neue Antworten geschlossen.