im sub menu Schrift verkleinern und die box schmaler machen

spezialcom777

hallo, bin blutiger Anfänger und versuche auf der Seite cetevital.net mit dem Theme conica.premium beim Menü (Beispiel Nahrungsergänzungsmittel) die Untermenüpunkte eine Idee kleiner zu machen von der Schriftgröße her. Auch die höhe, also der Platz über dem Wort und darunter soll schmaler sein, weil das Menü ist sonst endlos lang nach unten. Hat jemand eine Idee was ich in der style.ccs da verändern muss.
dort steht beispielsweise dies drin:

font-size: 15px; ist die Größe der Schrift für das normale Menü.
Aber für das Untermenü finde ich nix???

CSS

.main-navigation li a {
        display: block;
        float: none;
        padding: 8px 0 !important;
        color: #C5C5C5 !important;
        font-size: 15px;
        text-align: left;
        box-shadow: none !important;
    }
    .main-navigation li a:hover {
        color: #FFF !important;
    }
    .nav-arrow {
        display: none !important;
    }
    .main-navigation ul ul {
        position: relative !important;
        border: 0;
        top: 0 !important;
        left: 0 !important;
        float: none !important;
        background-color: rgba(255, 255, 255, 0.14) !important;
        padding: 0;
        margin: 0;
        display: none !important;
    }
    .main-navigation ul ul li:last-child a,
    .main-navigation ul ul li a {
        padding: 8px 10px !important;
        width: auto;
    }
    .stuck .main-navigation ul li:last-child a {
        padding: 8px 0px !important;
    }
    .stuck .main-navigation ul ul li a,
    .stuck .main-navigation ul ul li:last-child a {
        padding: 8px 10px !important;
    }
    .main-navigation ul ul li a {
        background: none !important;
    }
    .main-navigation a span {
        background: none !important;
    }


    #primary-menu {
        display: block;
    }
    .main-menu-close {
        display: block;
        border-radius: 4px;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 30px;
        color: #898989;
        text-align: center;
        padding: 0 8px 0 12px;
        height: 40px;
        line-height: 38px;
        cursor: pointer;
        z-index: 99;
    }
    .main-menu-close .fa-angle-left {
        position: relative;
        left: -4px;
    }
    li.open-page-item > ul.children,
    li.open-page-item > ul.sub-menu {
        display: block !important;
        visibility: visible;
        opacity: 1;
    }
    .main-navigation ul .sub-menu .menu-item ul.navigation-ul-right,
    .main-navigation ul ul.navigation-ul-right ul {
        left: auto !important;
        right: auto !important;
    }


    body.admin-bar .main-navigation #main-menu {
        padding: 85px 22px 30px 22px;
    }
    body.admin-bar .main-menu-close {
        top: 38px;
    }

Alles anzeigen

Danke

maxe edit: Code Button

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

Das solltest du beides mit CSS einstellen können. Teste doch mal folgenden CSS Code im 'zusätzlichen CSS'.
(Vom Dashboard -> Design -> Customizer - zusätzliches CSS)

HTML

.main-navigation ul ul li a {
  padding: 10px 32px 10px 20px;
  font-size: 12px;
}

wobei hinter 'padding:' der 1. und der 3. Wert für jeweils den oberen bzw. den unteren Abstand des Textes zum Rand stehen. Wert 2 und 4 sind für rechts und links.
'font-size' sollte selbsterklärend sein.
ggf. , wenn es so noch nicht geht, kannst du probieren ob durch den Zusatz !important zB

HTML

padding: 10px 32px 10px 20px !important;

das Erwünschte erzielt wird.

spezialcom777

Super Danke, es hat funktioniert. Vielen vielen Dank.

Gibt's auch noch einen Code, um die Haupt Menüzeile etwas schmaler zu machen?

Sailor56

Ja - gibt es.

HTML

.main-navigation a {
  padding: 10px 14px;
}

wobei der 1. Wert für den Abstand oben und unten des Elementes (Schrift im <a>..</a>) zum Rand des Elternelements zuständig ist und der 2. Wert für die Abstände links und rechts.
Bitte auch wieder in das zusätzliche CSS und wenn notwendig mit !important; nachhelfen.

Sailor56

... uhhh... ich seh es gerade. beim schmaler machen der Menüleiste, muss auch der Abstand zu den darunter liegenden dropdown Menüs angepasst werden.

HTML

.conica-navigation-animation-none.conica-navigation-style-plain ul ul {
  top: 31px;
}

Wenn der Menübalken in der Höhe passt, dann muss hier der Wert für 'top:' pixelgenau so eingestellt werden, dass kein Spalt zwischen dem Menübalken und dem Dropdown ist! .. sonst kann man die Menüpunkte nicht mehr auswählen.

spezialcom777

Nochmals vielen herzlichen Dank. Schön das es noch Menschen gibt, die anderen helfen. Wenn das nur überall so wäre, dann wären wir eine Einheit und kein gespaltenes Volk.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

im sub menu Schrift verkleinern und die box schmaler machen

Jetzt mitmachen!

Benutzer online in diesem Thema