Twenty Sixteen: Dropdown-Menüs im Header sind außerhalb des Bildschirms

  • Hallo,

    ich weiß nicht, ob ich hier richtig bin, aber ich hoffe es mal. Ich habe für eine Freundin ihren Blog auf Twenty Sixteen umgestellt, was auch alles wunderbar geklappt hat. Nur beim Headermenü gibt es Probleme mit den Untermenüpunkten, die runter klappen, wenn man auf den Menüeintrag zeigt: Die ploppen nach links auf (was ja ok ist), verschwinden aber bei schmaleren Bildschirmen am Rand des Bildschirms:

    Ich habe über Google gefunden, dass wohl mehrere das Problem haben, allerdings waren diese Threads alle auf Englisch (was ich nicht gut kann) und eine Lösung gab es dort auch nicht.

    Wisst Ihr eine? Ich wäre für Hilfe sehr 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

  • Ein Link zur Seite wäre hilfreich, denn nicht jeder installiert sich extra ein Theme, nur um das nachvollziehen zu können. Ich schätze irgendwas mit overflow:hidden oder z-index.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

  • Hallo SirEctor, die Seite ist zur Zeit leider noch im Wartungsmodus und nicht erreichbar, deshalb hatte ich den Screen gemacht. Wir wollten das Problem gerne lösen, bevor die Seite wieder online geht.

    Edit: Ich habe grade einen Gastzugang angelegt, damit kann man den Wartungsmodus umgehen. Kann ich Dir die Daten per PN schicken?

  • Das vermute ich auch, also CSS, aber ich finde die Lösung nicht.

    Seite ist online: http://www.janas-creatives.de/blog


    http://www.janas-creatives.de/blogIn der Menüleiste auf 'Downloads Sims 3' und dann auf die Unter- und Unteruntermenüs. Dann sieht man schon, dass das Menü über die Seitenbreite rausragt. Bei kleinen Bildschirmen wird es dann abgeschnitten.

  • Also eine Möglichkeit wäre das Menu statt links nach rechts auszuklappen, so kann es schon mal nicht aus dem Bildschirm nach links raus.

    dazu müsstest Du in der style.css

    Zeile 3016 classe [COLOR=#888888][FONT=Consolas][COLOR=#222222].main-navigation ul ul li:hover > ul[/COLOR], .main-navigation ul ul li.focus > ul[/FONT][/COLOR][FONT=Consolas] [/FONT]

    right: auto;
    left: 100%;

    Um die Pfeile zu drehen, die dann nach rechts zeigen nutzt Du einfach einen anderen Font.

    Zeile 3027 classe [COLOR=#888888][FONT=Consolas].main-navigation .menu-item-has-children > a:after[/FONT][/COLOR]
    content: "\f432";

    statt content "\f431". Dann hast die Pfeile nach rechts.

  • Das probiere ich gerne, vielen lieben Dank für Deine Hilfe! Ich habe nur im Dashboard keine Anzeige der Zeilennummern, was das Auffinden der richtigen Stelle in der Original-CSS schwierig macht. Könntest Du mir vielleicht sagen, was ich in der Child-CSS eintragen muss? Ich habe es mit

    Code
    .dropdown-toggle {
    right: auto;
    left: 100%;
    }

    versucht, aber das klappt nicht.

    Edit: Habe grade Deine Ergänzung gesehen, Dankeschön! Lege jetzt mal los und berichte, ob es klappt :)

  • das wird vermutlich nur für alle Menu Punkte auf der linken Seite klappen,
    hast du auch ganz rechts viele Unterpunkte wirds dort haken.

    Das ist die Limitierung dieses Themes, Grund dafür sind die Sprachen die von Rechts nach Links gelesen werden.
    So wie das Thema aufgebaut ist kracht es bei irgendeiner Sprachenfamilie bei Unter-Untermenus.

  • Ich habe mal ne ganz blöde Frage, Ditzumblog. Ich stelle ebenfalls gerade auf Sixteen um und habe bislang nie ein Header-Menü benutzt, das aufpoppt. Wie bekommst Du es hin, dass keine eigentliche "Seite" hinter dem oberen Menüpunkt liegt.

    Beispiel: "Downloads Sims 3" klappt ja auf, sobald Du mit dem Mousezeiger darüber fährst. Bei mir wäre es aber so, dass man auch schon auf "Downloads Sims 3" klicken kann, weil sich dann dahinter eine Seite verbirgt. Das möchte ich aber nicht. Es soll der Hover-Effekt zum Draufklicken nur bei den unteren Menüpunkten erscheinen...

    Ausserdem wüsste ich ganz gerne, wie Du Schriftart und -größe verändert hast :oops:

    Sorry, bin absoluter Laie....

  • Hallo Monsterblocker,

    es gibt keine blöden Fragen :) Das mit dem Menü habe ich mal irgendwo gefunden; ich weiß leider nicht mehr wo, so dass ich es nicht verlinken kann. Es ist also nicht auf meinem Mist gewachsen, ich erkläre es nur:

    Du musst mit einem Trick arbeiten. Du legst im Dashboard unter Design -> Menü einen Link an. Was Du als Linkadresse eingibst, ist vollkommen egal; die Linkbeschreibung muss allerdings das sein, was im Menü stehen soll, also zum Beispiel 'Downloads Sims 3'. Dann klickst Du auf 'Zum Menü hinzufügen'. Im Menü ist dieser neue Menüpunkt ja jetzt ganz unten zu finden. Du klickst auf das kleine Dreieck und löschst alles im Feld 'URL', so dass es leer ist. Dann den Menüpunkt noch an die richtige Stelle schieben und speichern - fertig :)

    Wegen der Schriftart: Das ist hier sehr gut erklärt; so habe ich es gemacht. Du kannst es auch über Google-Fonts machen, aber ich mag die verlinkte Methode lieber. Die Schriftgröße änderst Du über die CSS-Datei. Für beides solltest du allerdings ein Child-Theme anlegen.

  • Ich danke Dir. Werde es direkt testen. Supi!!!!

    Edit: Also das mit dem Menü hat schon mal einwandfrei geklappt. Merci beaucoup.

    Jetzt muss ich mich nur noch an die Schriftarten machen... *schwitz*

    Einmal editiert, zuletzt von Monsterblocker (13. Januar 2016 um 19:19)

  • Das freut mich! Und für die Sache mit der Schrift drücke ich Dir die Daumen :)

    Mmmmh, also über EASY GOOGLE FONTS habe ich jetzt schon mal die Schriftart des Conents anpassen können. Wenn auch nicht die Größe... :-(

    Was mir darüber aber nicht gelungen ist, ist eine Veränderung der Überschriften. Habe H1-H6 ausprobiert, ohne Erfolg.... :idea:

  • Mir ist gerade aufgefallen - ich meine ja gar nicht die Überschriften. Diese kann ich sehr wohl über Google Fonts ändern. Ich meinte den TITEL des jeweiligen Beitrags! Also die Überschrift eines Artikels. Diese sind mir viel zu groß... *schäm*

  • Aber jetzt:

    Code
    .entry-title {
        font-size: 40px;
        font-size: 2.5rem;
    }

    Die px-Größe natürlich nach Wahl; die rem-Größe entsprechend (Pixel-Größe geteilt durchh 16).

    Edit: Mir fällt grade auf: Meintest Du jetzt überhaupt die Buchstabengröße? *denk*

    Habe immer noch nicht die richtige Stelle gefunden. :?: Ich meine den Namen eines Beitrags (Posts) sowie den jeweiligen Namen einer Seite. Das ändere ich doch ausschliesslich in der style.css (respektive im Child)?

    Edit: Ich habe es!!!! Vielen Dank. Waren einfach zu viele Stellen mit "entry-title". Und ich hatte die REM-Angabe nicht der Pixel-Größe angepasst.

    Einmal editiert, zuletzt von Monsterblocker (13. Januar 2016 um 20:52)

Jetzt mitmachen!

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