horizontale Navigation richtig formatieren

    Hi,
    nachfolgend habe ich den Quellcode von meinem Menü abgebildet:

    Horizontale Formatierung via CSS klappt prima. Was ich nun gerne machen würde, ist das alle Seiten beim "current_page_item"-Status eine andere Hintergrundfarbe bekommen als normal. Das gilt auch für die Startseite. Und da ist der Punkt, an dem ich nicht weiter weiß, da diese Seite offensichtlich nie den "current_page_item"-Status erhält...

    Wie formatiere ich außerdem die class-Angabe "page_item current_page_item" richtig? Ich habe mir da ne Lösung von einem anderem Template abgeschaut, die mir aber nicht besonders gefällt:

    CSS
    .current_page_item a, .current_page_item a:hover {
   background: #004499 !important;
   color: #fff !important;
}

    LG, hzirl

    • 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)

    Mehr erfahren

    Zitat von hzirl

    Hi,
    nachfolgend habe ich den Quellcode von meinem Menü abgebildet:

    Horizontale Formatierung via CSS klappt prima. Was ich nun gerne machen würde, ist das alle Seiten beim "current_page_item"-Status eine andere Hintergrundfarbe bekommen als normal. Das gilt auch für die Startseite. Und da ist der Punkt, an dem ich nicht weiter weiß, da diese Seite offensichtlich nie den "current_page_item"-Status erhält...

    Wie formatiere ich außerdem die class-Angabe "page_item current_page_item" richtig? Ich habe mir da ne Lösung von einem anderem Template abgeschaut, die mir aber nicht besonders gefällt:

    CSS
    .current_page_item a, .current_page_item a:hover {
   background: #004499 !important;
   color: #fff !important;
}

    LG, hzirl

    HTML
    <li id="first"  <?php /* if is home */ if ( is_home()&& $paged == 1  && $paged) : ?>    class="current_page_item"   <?php endif; ?> ><a href="#">Home</a></li>

    die simpleste FOrm , um an die gewünschte class zu kommen

    das andere ist absolute Geschmackssache, da mag ich nicht so richtig mitmischen

    lg

    Monika, vielen Dank für deine Hilfe! Der Tipp war Gold wert!
    Ich habe mich gleich mal in der Doku schlau gemacht über die ganzen Funktionen in dem Zusammenhang: is_home(), is_page() etc.

    LG, hzirl

    Hallo,

    ich möchte gern hier einmal ansetzen:

    Mein Code im header sieht folgendermaßen aus:

    PHP
    <div id="nav">
		<ul>
			<li class="page_item <?php /* if is home */ if ( is_home()&& $paged == 1 && $paged) : ?> current_page_item <?php endif; ?>"><a href="/v4">Home</a></li>
			<?php wp_list_pages('exclude=17,38&title_li='); ?> 
		</ul>
	</div>

    per CSS wie folgt gestyled:

    PHP
    .page_item a {float: left;	padding: 10px 12px;	text-decoration: none; color: #e7e3d9; border: none; border-bottom: 4px solid #383D44; background: url(images/nav-bg.gif) no-repeat bottom right;}
.page_item:hover {color: #fff; background: #192222; border-bottom: 4px solid #97A543;}
.current_page_item {font-weight: bold; color: #fff; background: url(images/nav-bg.gif) no-repeat bottom right; background: #192222;	border-bottom: 4px solid #97A543;}

    Mein Problem: er zieht sich auf der Home-Seite nicht die class '.current_page_item'

    Wär für eine Tipp dankbar!

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden