Schriftgröße im Hauptmenü und Anpassung der Social-Icons

Nina H.

Hallo,

Ich bin an meine Grenzen des CSS-Wissens gekommen. Ich habe in den letzten Tagen vieles auspropiert, komme aber nicht zu dem Ergeebnis, das ich mir wünsche.

Zum Hauptmenü:
Ich möchte gerne die Schriftgröße der 5 Menüpunkte größer haben. Die Schriftart konnte ich ändern, aber für die Größe finde ich nicht die passende Klasse heraus. Außerdem würde ich die Schrift gerne Dickgedruckt haben, was ich auch hinbekomme, aber dies wirkt sich den auch auf das ausklappbare Submenü aus, was ich nicht möchte. Ich habe herausfinden können, dass ich die Schriftgröße mit ".main-navigation a" größer bekomme, aber auch das wirkt sich auf das Submenü aus, was ja so bleiben soll.

Desweiteren scheint der Menüpunkt "Über" eine andere Einstellung zu haben, als wie die anderen, dabei habe ich dort nie etwas geändert. Er soll zwar auch den Hovereffekt haben, wie die anderen, aber nicht dauerhaft grau angezeigt werden, sondern weiß wie die anderen.

Zu den Social-Icons:
Oben rechts unter dem Avatarbild, habe ich Social-Icons untergebracht, aber nicht mit einem PlugIn, sondern selbst geschrieben. Ich bin eigentlich soweit damit zufrieden, aber der Hovereffekt scheint nicht richtig zu funktionieren. Wenn man mit der Maus drüber fährt, sollten die Icons eigentlich durchscheinen, aber es erscheint der volle Kreis. Scheinbar nach Lust und Laune funktioniert es mal. Ich arbeite mit Firefox. Im Crome wird es richtig angezeigt. (grübel)

Archiv-Anzeige:
Wo ich gerade bei den Browsern bin: Ziemlich unten in der Sidebar ist das Drop-Down Feld für das Archiv. Vor einem Jahr habe ich dort ziemlich viel herumgewerkelt, um mit einer Anleitung den Pfeil zuändern, was ich nicht hinbekommen habe. Nun habe ich mich entschieden, dass es erst einmal so bleibt, weil ich dort nicht weiter kam. Im Firefox wird es mir zentriert angezeigt, wie es sein soll, aber im Chrome nicht. Von den Browserangaben im CSS habe ich leider keine Ahnung.

Was meint ihr? Kann mir da jemand helfen? Bin ich vielleicht bei einigem auf dem richtigen Weg? Meinen Blog findet ihr hier: https://www.heimmieseckzimmer.de

Liebste Grüße, Nina

Werbepost

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

Sailor56

Zu dein Problem mit der Schriftgröße dem Fettgedruckten könntest du folgendes Testen:

Code

#primary-menu > li > a {
    font-size: 1.0em; /*Vorsicht, wenn die Schriftgröße zu groß ist, bricht das Menü um*/
    font-weight: 700; /*Einstellbar in hunderter Schritten von 100 bis 900*/
}

Das grau hinterlegte 'Über' kann ich nicht erkennen - weder im FireFox noch im Chrome.

Die Social Media Icons beim hovern durchsichtig machen - vielleicht so:

Code

.social-buttons a:hover,
.social-buttons a:hover i {
    background: transparent;
    color: #7fc7af;
    opacity: 0.8;
}

Damit sollte zunächst die Voreinstellung für Farbe und Hintergrund überschrieben werden (auf die Werte, die das 'ungehoverte Icon hat) und dann die Deckkraft (opacity) reduziert werden - mögliche Werte von 0 bis 1.

Welches Dropdown.. welcher Pfeil?

Den CSS Code bitte in das 'zusätzliche CSS' im Customizer - auf unerwünschte Nebenwirkungen prüfen.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Schriftgröße im Hauptmenü und Anpassung der Social-Icons

Jetzt mitmachen!