Icon unterhalb der horizontalen Menüleiste einfügen

Sasa2

Hallo,

ich benutze seit kurzem folgendes Theme: "Bugis" von Elma Studio
Meine Homepage: http://www.yuniku.de

Ich habe bereits durch Internettipps und ausprobieren ein paar Änderungen in der footer.php, content.php und in der style.php vorgenommen. Allerdings direkt, nicht als Child Theme. Bin aber Änfänger!

Mein Anliegen ist nun folgendes:
Ich möchte gerne unter jedem Menüpunkt ein eigenes Bild einfügen. (Die liegen bisher als jpg vor)
Ich hab mich hier ein wenig umgesehen und herausgefunden, dass man das wohl machen kann, indem man das Bild der jeweiligen CSS Klasse der Menüpunkte in der Style.css zuweist.
Ich habe im Quelltext gesehen, dass die Kategorie "Starseite" und die Zwischenräume bereits eine eigene Klasse haben. In der Style.css hab ich die allerdings nicht gesehen.
Mir stellt sich jetzt die Frage, ob ich den anderen Menüpunkten auch Klassen zuweisen muss.
Denn das Bild soll ja nicht direkt ins beige Hintergrundfeld unter den Text sondern mit etwas Abstand.
Oder leg ich dann eine Klasse für den Hintergrundbereich an?
Und wie muss ich dann weiter vorgehen. Ich kann ja schlecht einfach den Bildnamen in die Style.css einsetzen;)
Ich hoffe ihr könnt mit meinen Angaben etwas anfangen. Für Tipps wäre ich wirklich dankbar.

Liebe Grüße
Sasa

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

pixselig

Hallo Sasa

Code

li#menu-item-15 a:after {
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 31px;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground.jpg);
    background-repeat: no-repeat;
}


li#menu-item-21 a:after {
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 31px;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground.jpg);
    background-repeat: no-repeat;
}


li#menu-item-17 a:after {
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 31px;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground.jpg);
    background-repeat: no-repeat;
}


li#menu-item-19 a:after {
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 31px;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground.jpg);
    background-repeat: no-repeat;
}


li#menu-item-18 a:after {
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 31px;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground.jpg);
    background-repeat: no-repeat;
}

Alles anzeigen

Ungetested, und muss noch um die entsprechenden URLs ergänzt werden.

LG, pixselig

Sasa2

Hallo Pixselig,

danke für deine Antwort. Ich kann also die angezeigte Bild url nehmen, gut.
Was ich jetzt noch nicht weiß, bitte nicht lachen, was mach ich jetzt mit den Codes?
Füg ich das komplett am Anfang in der Style.css im Bereich "Main Navigation" ein.
Oder jeden Teil seperat an die passende Stelle.
Das wäre ja machbar, allerdings erkenn ich in der Style.css nicht wo es hin muss.
(Ich kann sonst auch den Teil der Style.css Text hier posten, falls notwendig.)
Es tut mir leid wenn ich so blöde Nachfragen stellen muss. Ich hoffe du bist bereit das etwas ausfühlicher zu erklären.

Liebe Grüße
Sasa

pixselig

Hallo Sasa

Der Code gehört ganz an das Ende deiner style.css

Ich habe Ihn nochmals kurz überarbeitet, dass sollte jetzt so funktionieren:

Code

li#menu-item-15 a:after {
    display: block;
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground_fuer_startseite.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}


li#menu-item-21 a:after {
    display: block;
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground_fuer_ueber_uns.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}


li#menu-item-17 a:after {
    display: block;
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground_fuer_blog.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}


li#menu-item-19 a:after {
    display: block;
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground_fuer_shop.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}


li#menu-item-18 a:after {
    display: block;
    content: '';
    position: relative;
    left: 0;
    right: 0;
    top: 0;
    height: 50px;
    background-image: url(http://meineseite.de/meinbackground_fuer_kontakt.jpg);
    background-repeat: no-repeat;
    background-position: center center;
}

Alles anzeigen

Wobei du jetzt nur noch die jeweilige URL zu den Bildern einfügen musst.

LG, pixselig

Sasa2

Hallo Pixselig,

vielen Dank für deine Mühe.
Ich probier das morgen Früh direkt aus und meld mich dann mit Ergebnissen :)

Liebe Grüße
Sasa

Sasa2

Hallo Pixselig,

ich habs jetzt fertig, hat super geklappt. Gefällt mir wirklich gut.
Eventuell mach ich die Bildchen noch was größer aber erst einmal bleibts so.
Nochmal herzlichen Dank!

Liebe Grüße
Sasa

Sasa2

Ich muss noch einmal eine Nachfrage stellen.
Leider musste ich feststellen, dass die Menüleiste nicht auf allen Bildschirmgrößen ordentlich in einer Reihe angezeigt wird.

Bei 15" sind die Menüpunkte schön über die Breite des Headers verteilt. = ideal
Bei 10" und manchen Handys eng aneinander in einer Reihe und rechtsbündig (auch ok)
Probleme gibts bei 17" und manchen Handys. Da werden die Menüpunte nicht in einer Reihe angezeigt, sondern in 2 oder 3 Reihen. Das wäre ja noch ok wenn das dann schön bündig untereinander wäre. In der Realität sind die Menüpunkte in den einzelnen Reihen total wid verschoben.

Eingerichtet hatte ich den Menüpunktabstand in der Style.css bei Main Navigation im Unerpunkt #main-nav ul li { hier hab ich bei margin die letzte Zahl auf 123 umgestellt.
Damit, von rechts ausgehend, die Menüpunkte die Breite des Headers haben.
Ich nehme mal an das war der Fehler? Oder liegt das an den Bildern?
Was kann ich denn jetzt machen um das zu ändern?

Liebe Grüße
Sasa

pixselig

Hallo Sasa

Ich kann dein Problem nicht ganz nachvollziehen - siehe dazu die angehängten Screenshots.

LG, pixselig

Sasa2

Hallo Pixelig,

danke für deine Antwort.
Seltsam, so wies bei dir ausschaut is es völlig in Ordnung.
Ich poste dann heut Nachmittag dann auch mal ein Foto von der Verschiebung.
Bin gerade unterwegs.
Vielleicht ist es aber auch wirklich ein seltenes Phänomen.
Ich meld mich dann später nochmal.
Liebe Grüße
Sasa

Sasa2

So hier mal die Fotos:

Das ist ein Handy mit 7cm Bilddiagonale. Hier ist es am schlimmsten.
Das ist aber auch eher eine unübliche Größe, daher betrifft es
bestimmt kaum jemanden.

Das ist von einem 17 Zoll Bildschirm.

Das sind 15 Zoll. Auf dem Computer hab ich alles eingerichtet.

Ich hoffe jetzt versteht mans besser.

Liebe Grüße
Sasa

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Icon unterhalb der horizontalen Menüleiste einfügen

Jetzt mitmachen!