Footer- & Header-Menu: Schriftgrössen

  • in meinem Hauptmenu werden die Fonts nicht mit 600 dargestellt wie in den Einstellungen eingestellt. Ich untersuche das CSS mit Firefox und finde:
    .ast-builder-menu-1 {
    font-family: 'Raleway',sans-serif;
    font-weight: 600;
    text-transform: uppercase;

    also eigentlich korrekt. Versuchsweise habe ich zustätzliches CSS eingefügt und dann funktionierts:
    .menu-link {font-weight:600 !important;}
    das Problem ist, dass dann das Menu im Footer auch fett wird, was es nicht soll.

    das zusätziche CSS hab ich wieder gelöscht: https://www.messora.ch/WP/

    was übersehe ich?
    herzlichen Dank für Eure Hilfe!

    • 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

  • Da mußt du den Selektor weiter einengen. Bei denem Selektor werden alle Menu-links angesprochen. Wenn du nur bestimmte Menü-Links ansprechen willst mußt du diese herausfinden und benennen.
    z.B. nur das Hauptmenü:

    CSS
    .ast-builder-menu-1 .menu-link {font-weight:600 !important;}

    oder das Footermenü in "italic"

    CSS
    .site-primary-footer-wrap .menu-link {font-style:italic !important;}

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • funktioniert so. ABER ich hab im Footer noch ein anderes Kuriosum:
    in meinem Footer-Menu wird in der Tablet-Ansicht ein Menupunkt umgebrochen, aber nur, wenn ich das Menu mittig ausrichte. Es soll mittig sein. Richte ich es nach links aus, hab ich keine Zeilenumbrüche.

    In der mobilen Ansicht wird der Zeilenabstand des Menus plötzlich zu gross. kann ich das überhaupt einstellen?

    ausserdem finde ich die mobile Footer Ansicht etwas unübersichtlich. Ich hab mit dem HTML-Widget einen <hr color="#685944"> eingefügt. Den Trenner sehe ich, die Farbe bleibt aber grau. wäre es auch möglich, diesen Trenner nur in der mobilen Ansicht zu zeigen? (für ein Divider-Widget müsste ich die Pro-Version haben...)

  • zur Tablet Ansicht ....

    Code
    #astra-footer-menu > .menu-item > .menu-link {
        text-align: center;
    }

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • .... Abstände mobile Ansicht, die Padding-Werte sind individuell anpassbar ....

    Code
    #astra-footer-menu .menu-item > a {
        padding-top: 0px;
        padding-bottom: 3px;
        padding-left: 10px;
        padding-right: 10px;
    }

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

  • ... noch den Trennstrich, nur im´n der mobilen Ansicht, auch hier sind die Werte anpassbar ;)

    Code
    @media (max-width: 544px) {
    .site-footer-above-section-2.site-footer-section.site-footer-section-2 {
        border-bottom: 2px solid #685944
        }
    }


    .... oder du stylst dein <hr> auch mit dem Media Queries wie oben und passt die background-color an:

    Code
    @media (max-width: 544px) {
    hr {
      background-color:#685944;
      border:0;
      height:1px;
      margin-bottom:1.5em;
     }
    }

    .... weitere Möglichkeiten z.B.:

    Code
    width: 50%;
      margin-left: auto;
      margin-right: auto;

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

    2 Mal editiert, zuletzt von SEpp55 (16. August 2025 um 12:37)

  • .... und nicht vergessen zu jeder CSS- Anweisung einen Kommentar einfügen, sonst weißt du in einem Jahr nicht mehr wo und was das ist ;):rolleyes:

    Z.B.:
    /*Footermenu - Zeilenabstand für mobile Ansicht angepasst*/

    nothing is as easy as it looks. --- Wenns gefällt - gibts dafür einen Button ;)
    Manchmal komme ich mir wie eine Suchmaschine vor ....:rolleyes:

Jetzt mitmachen!

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