Problem mit der Navigation in der mobilen Ansicht

Christine Romero

Guten Abend,

ich habe bei einer Kundenwebseite das Problem, dass die mobile Ansicht auf dem Tablet nicht korrekt funktioniert, wenn man es quer liegt- dann bleibt das Menü wie in der Desktopversion bestehen - hier kann man dann aber nicht richtig wischen und somit einen Teil des Menüs nicht sehen, es wird nicht zum "mobilen Menü". Hochkant ist es in Ordnung.
Ich verwende das Album Responsive Layout und habe es auf Android und IPad getestet. Darstellung auf dem Handy ist auch in Ordnung.

Kann ich das irgendwie beeinflussen oder anpassen? Wäre schade, wenn ich dadurch mögliche Interessenten abschrecke...

Danke und viele Grüße

Christine

Uwe Keim

Die Kollegen können das nachher bestimmt fundiert beantworten.

Ich persönlich besuche viele Websites, die aufm iPad quer genau so aussehen wie die desktop-version.

Vermutlich ist das schlicht deshalb so, weil genug Pixel in der Breite sind.

Steffen T.

Hallo,

bitte mal einen Link hier posten, wo wir das Verhalten sehen können.

Christine Romero

Zitat von sT.

Hallo,

bitte mal einen Link hier posten, wo wir das Verhalten sehen können.

Hallo Herr T.,

kann ich Ihnen den Link auch an eine Support-Mailadresse senden?

Danke und Grüße

Steffen T.

Ja gerne, einfach an folgende Adresse senden: support[at]zeta-producer.com ([at] durch @ ersetzen)

Bitte Link zu diesem Forums-Beitrag mitsenden, damit wir die E-Mail zuordnen können.

Steffen T.

Hallo Frau Romero,

ich habe den Link zu Ihrem Projekt erhalten. Ursache ist, dass der linke Sidebar-Bereich mit der Navigation nicht scrollt. Das müssen wir uns noch genauer anschauen und hier eine Lösung finden. Bis dahin hilft Ihnen folgender Workaround. Bitte einfach folgendes eigenes CSS einfügen. Siehe dazu auch: https://docs.zeta-producer.com/eigenes-css-einfuegen.html. Mit Hilfe des Workarounds wird die mobile Ansicht dann schon bei 1024 Pixel aktiv. Im Landscape-Format auf dem iPad wird dann also auch die mobile Ansicht dargestellt.

Code

<style>
@media only screen and (max-width:1024px) {
    #page {
        padding: 0
    }
    .notouch #sidebar #nav ul li:not(.open):not(.active):hover>ul,
    #sidebar #nav ul li:not(.open):not(.active):hover>ul {
        display: none
    }
    #sidebar {
        border-top-width: initial;
        position: relative;
        top: auto;
        width: 100%;
        max-width: none;
        padding: 20px;
        margin-left: 0
    }
    #sidebar #logo a.logo {
        display: inline-block;
        margin-top: 30;
        margin-bottom: 0
    }
    #sidebar #logo a.logo img {
        width: 100%
    }
    #sidebar #logo+p.webname {
        margin-top: 26px
    }
    #sidebar #nav {
        position: absolute;
        top: 0;
        right: 0;
        background-color: transparent;
        padding: 20px
    }
    #sidebar #nav #mobilenavtoggle {
        display: block
    }
    #sidebar #nav a#mobilenavtoggle:hover,
    #sidebar #nav a#mobilenavtoggle:focus {
        background-color: transparent
    }
    #sidebar #nav>ul,
    #sidebar #nav .zpsearchform {
        display: none
    }
    #sidebar #nav.on {
        background-color: white;
        border: 2px solid #796fb2;
        border-top-width: 0;
        border-right-width: 0
    }
    #sidebar #nav.on>ul,
    #sidebar #nav.on .zpsearchform {
        display: block
    }
    #sidebar #nav ul {
        min-width: 0
    }
    #sidebar #nav ul li {
        position: relative;
        margin: 0
    }
    #sidebar #nav ul li.open>ul,
    #sidebar #nav ul li.clicked>ul {
        display: block
    }
    #sidebar #nav ul li.open>a {
        font-weight: normal
    }
    #sidebar #nav ul li.haschilds.open>a:after,
    #sidebar #nav ul li.haschilds.clicked>a:after {
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        transform: rotate(135deg)
    }
    #sidebar #nav ul ul {
        position: relative;
        display: none;
        left: auto;
        margin-left: 1em;
        background-color: transparent;
        border: 0;
        box-shadow: none
    }
    #sidebar #nav ul ul a,
    #sidebar #nav ul ul a.active {
        color: rgba(54, 31, 25, 0.75);
        margin-left: 0
    }
    #sidebar #nav>ul li {
        display: list-item
    }
    #contentframe {
        border-bottom-width: initial;
        margin-left: 0
    }
    #banner,
    #footer,
    #afterfooter {
        padding: 15px;
        margin-bottom: 0;
        margin-top: 0
    }
    #banner+#header {
        margin-top: 0
    }
    #content {
        padding: 15px
    }
    #afterfooter {
        padding-top: 0
    }
}
</style>

Alles anzeigen

Christine Romero

Vielen lieben Dank für den schnellen und tollen Support. Ich habe es gerade hochgeladen und es funktioniert.

Problem mit der Navigation in der mobilen Ansicht

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?