Main Menü ohne Umbruch

  • Gelöst tuppischleife

    (@tuppischleife)


    vor 11 Monaten, 2 Wochen

    Hallo liebe Wissende, ich betreue die Seite http://www.spd-zeuthen.de, die ein uraltes Theme benutzt. Leider komme ich mit meinem rudimentären Wissen nicht weit, da viele Funktionen und Einstellmöglichkeiten für mich nicht erreichbar sind.

    Im Header gibt es ein Menü und es gab eine Suche. Es ist mir gelungen, das Suchfeld über zusätzliches CSS auszublenden, um Platz zu machen für zwei weitere Menüpunkte. Nun kommt das Menü aber zweizeilig, es spart weiterhin den Bereich, wo die Suche war, aus. Das möchte ich aber nicht. Kann ich das über einen weiteren CSS-Schnipsel lösen, so dass das Hauptmenü einzeilig erscheint?

    Ich danke euch für eure Hilfe.
    Liebe Grüße, Tine

    Die Seite, für die ich Hilfe brauche: [Anmelden, um den Link zu sehen]

Ansicht von 3 Antworten – 1 bis 3 (von insgesamt 3)
  • Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 11 Monaten, 2 Wochen

    Hm, da gibt es veschiedenen Ansatzpunkte.

    • Link „Fraktion in der Gemeindeverwaltung“ kürzen (z.B. nur „Fraktion“ oder „Gemeindefraktion“)
    • Schriftgröße des Navigationsmenüs verkleinern. Dazu kannst du im Customizer unter Zusätzliches CSS eingtragen:
    

.site-navigation .navbar {
  font-size: 0.8em;
}

    Das lässt sich auch mit einer Mediaquery verbinden, damit die Schrift erst ab einer kleineren Bildschirmauflösung kleiner wird:

    @media screen and (max-width: 1200px) {
.site-navigation .navbar {
  font-size: 0.8em;
}
}
    • Die Abständer der Menüeinträge verringern und ein Trennzeichen einblenden :
    

.site-navigation .nav > li > a {
  padding: 0.1em;
  margin-right: 0.1em;
}

.site-navigation .nav > li > a::before {
  content: '|';
}

    Das Theme verwendet ein Gestaltungsraster (Bootstrap), in dem angegeben wird, wieviel Prozent der Bildschirmbreite zum Beispiel die Navigation einnehmen darf. Du kannst zwar mit einer CSS-Regel das Feld für die Suche ausblenden, aber dadurch verschieben sich nicht die Vorgaben des Rasters. Hierfür müsstest du ein Child-Theme erstellen und das Header-Template anpassen, was aber ein paar Grundkenntnisse in Bootstrap voraussetzt. So ein Child-Theme könnte auch eine Anpassung des Break-Point enthalten, ab dem ein Hamburger-Menü angezeigt wird.

    Da das Theme von 2017 stammt und mit aktuellen PHP-Versionen nicht kompatibel ist, würde ich allerdings auch nicht zu viel Aufwand reinstecken.

    Thread-Starter tuppischleife

    (@tuppischleife)

    vor 11 Monaten, 2 Wochen

    Tausend Dank @pixolin. Auf die Lösung, die Benennung der Menüpunkte zu ändern, hätte ich ja auch allein kommen können. So konnte ich das Problem ohne Aufwand und CSS lösen. Wunderbar! Mit Bootstrap kenne ich mich nicht aus und es lohnt auch nicht, da hast du Recht. Es muss einfach eine neue Seite her.

    Moderator Bego Mario Garde

    (@pixolin)

    Moderator (nicht mehr aktiv)

    vor 11 Monaten, 2 Wochen

    Freut mich, wenn wir helfen konnten.
    Weiterhin viel Erfolg mit der Website.

Ansicht von 3 Antworten – 1 bis 3 (von insgesamt 3)
  • Das Thema „Main Menü ohne Umbruch“ ist für neue Antworten geschlossen.