Hallo.
Wie kann ich in der Wordpress Navigation einen Text (also Link zu einer Seite) durch ein Bild ersetzen? Hier will ich z.B. statt "englisch" (also eine englische Seite) einfach eine kleine britische Flagge in der Navigation haben.
Bild statt Text in Wordpress Navigation
-
-
- Gerade eben
- 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)
-
Hi,
du kannst es einfach per CSS machen. Jeder Menüpunkt hat seine eigene Klasse. Einfach diese ansteuern mit CSS.
text-indent:-9999px; Um den Text zu "verstecken" und
background: url() no-repeat center center; um das Bild als Hintergrund zu setzen.Du kannst dem Menüpunkt auch selber eine eigene Klasse (z.B. englisch) geben. Dazu einfach den Punkt Menüs aufrufen: http://www.deine-url.de/wp-admin/nav-menus.php und unter Optionen einblenden im oberen Bereich der Seite den Haken bei "CSS-Klassen" setzen. Wenn du jetzt einen Menüpunkt aufklappst, kannst du diesem eine eigene CSS-Klasse zuweisen. Das ganze prozedere setzt natürlich vorraus, dass du den Menü Manager auch in deinem Template verwendest (also dort auch Menüs angelegt sind).
Ich hoffe das hilft dir weiter.
Gruß,
Christian
-
andere Variante wäre vor oder nach dem Text eine Grafik zu setzen. Dies könnte man sehr einfach über ein Plugin steuern. Hier ist ein Beispiel bei Kontakt: http://www.dickeeiche.de/wp/ . ich such mal den Namen von dem Plugin raus...
Update: Category & Page Icon nennt sich das Plugin.
-
Hallo Christian,
vielen Dank. Das hat mir sehr viel geholfen.
Ich habe bei den Menüs auf die CSS Klasse hingewiesen und in der CSS vom Theme folgenden Eintrag gemacht:Zitat.englisch {
text-indent:-9999px;
background: url(Bildurl) no-repeat center center;
}
Jedoch sieht es bei mir so aus http://www.abload.de/img/navigation5mzg2.png
Wie kann ich die Flagge jetzt "richtig rücken" -
Hallo steffs,
das kannst du mit background-position machen.
background: url(Bildurl) no-repeat 20px 5px;
Weitere Infos findest du hier: http://www.css4you.de/background-position.html
Gruß,
Christian
-
Vielen Dank! Es hat alles geklappt
-
Guter Tipp. Bei mir hat's fast geklappt. Das Bild wird nämlich nicht angezeigt. Laut firebug wird da ein "transparent" gesetzt. Wie kann ich das ausschalten? (Bin so vorgegangen wie endcore das beschrieben hat)
-
Ich habe es eben mit einem anderen Theme ausprobiert. Da klappt's wunderbar. Allerdings habe ich ein Artisteer-Theme und das will da offenbar ein 'transparent' hinzufügen. Es liegt also (mal wieder) an Artisteer :roll:
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!