ComputerBase Menü
Aktuelles

PHP Wordpress: wp_nav_menu nimmt css Style nicht an

Rubikalubi

Rubikalubi

Lt. Junior Grade
Registriert
Mai 2013
Beiträge
362
Guten Abend,
Ich habe mir jetzt endlich mal ein Buch zum Theme erstellen mit Wordpress gekauft. In dem Buch wird als Framework Bootstrap genommen. Das ging auch eigentlich alles recht gut von der Hand, bis Ich zum dynamischen Menü in Wordpress gekommen bin. Das Menü will nämlich auf biegen und brechen nicht den definierten Style von Bootstrap annehmen. Die Stylesheets sind anscheinend auch richtig eingebunden, bis auf das Menü wird nämlich alles richtig angezeigt. Dann schreibe Ich hier mal einfach die PHP Passage aus der Header.php rein und den dazugehörigen Ausschnitt aus dem Stylesheet.
PHP: 
<?php 
				wp_nav_menu(
					array(			
						'theme_location' => 'haupt-menu',
						'menu_class' => 'nav' ));
			?>

und noch der CSS Code

HTML: 
.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav > li.disabled > a {
  color: #999;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #999;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}
.nav-tabs {
  border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
  border-color: #eee #eee #ddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555;
  cursor: default;
  background-color: #fff;
  border: 1px solid #ddd;
  border-bottom-color: transparent;
}
.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-tabs.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-tabs.nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs.nav-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active > a:hover,
.nav-tabs.nav-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs.nav-justified > .active > a,
  .nav-tabs.nav-justified > .active > a:hover,
  .nav-tabs.nav-justified > .active > a:focus {
    border-bottom-color: #fff;
  }
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #428bca;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}
.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  margin-bottom: 5px;
  text-align: center;
}
.nav-justified > .dropdown .dropdown-menu {
  top: auto;
  left: auto;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
  .nav-justified > li > a {
    margin-bottom: 0;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  margin-right: 0;
  border-radius: 4px;
}
.nav-tabs-justified > .active > a,
.nav-tabs-justified > .active > a:hover,
.nav-tabs-justified > .active > a:focus {
  border: 1px solid #ddd;
}
@media (min-width: 768px) {
  .nav-tabs-justified > li > a {
    border-bottom: 1px solid #ddd;
    border-radius: 4px 4px 0 0;
  }
  .nav-tabs-justified > .active > a,
  .nav-tabs-justified > .active > a:hover,
  .nav-tabs-justified > .active > a:focus {
    border-bottom-color: #fff;
  }

Danke schon mal im Voraus und wenn ihr noch andere Codeschnipsel braucht einfach bescheid geben :)
Gruß Rubi
 
Die Seite ist nicht online, die läuft beim mir lokal auf einem xampp Server.
 
Dann lad sie halt auf einen Free-Hoster hoch, sonst ist das Rätselraten. Besonders da die Aussage er nimmt die Styles nicht an, nicht besonders vielsagend ist. Wenn er einen Style nicht annimmt, muss er ja irgendwas anderes dafür setzen. Also einfach mal mit den Webdeveloper-Tools deines Browsers schauen.
 
ok dann werde Ich das mal machen. Ich habe schon mit firebug nachgeguckt da war die Klasse richtig angegeben. Brauche Ich für die Webseite dann schon ein Impressum?
 
Für eine Seite ohne Inhalt brauchste kein Impressum ;) Wenn du das Proble gelöst hast kannst du sie ja auch wieder löschen oder auf Maintenance stellen.
 
ok hab gerade noch was Guthaben bei Nitrado gefunden :D Werde die Webseite da mal hochladen. Stelle dann gleich den Link rein. Danke schonmal für die Hilfe :)

Ok hier ist der Link: http://ni179270_2.vweb04.nitrado.net/wordpress/
Nicht erschrecken, Ich habe noch nicht viel am Style gemacht. Gemeint ist oben der blaue Listenpunkt. Im Buch nimmt der direkt die definierten Styles für die Klasse nav an, aber bei mir nicht.
ich hoffe du kannst damit was anfangen
 
Zuletzt bearbeitet:
Hast du auch ein Beispiel wie es eigentlich aussehen sollte?

Edit: Ok, du willst also die Navbar vom Bootstrap bekommen.

Schau mal in deinen HTML-Code:
HTML: 
<div class="navbar-collapse collapse">
   <div class="nav">
      <ul>
         <li class="page_item page-item-2">
            <a href="http://...">Beispiel-Seite</a>
         </li>
      </ul>
</div>

richtig wäre aber:
HTML: 
<div class="navbar-collapse collapse">
   <div>
      <ul class="nav navbar-nav">
         <li class="page_item page-item-2">
            <a href="http://...">Beispiel-Seite</a>
         </li>
      </ul>
</div>

Kannst du vlt mal den vollständigen Code deiner header.php posten?
 
Zuletzt bearbeitet:
Website Header.png
So in etwa sollte es normalerweise aussehen.

hier ist der Code der Header.php

PHP: 
<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title><?php bloginfo('name'); ?> <?php wp_title(); ?></title>
        <meta name="description" content="<?php bloginfo('description'); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css"
        <style>
            body {
                padding-top: 50px;
                padding-bottom: 20px;
            }
        </style>

        <script src="<?php echo get_stylesheet_directory_uri(); ?>/js/cendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
     <?php wp_enqueue_script("jquery"); ?>  
     <?php wp_head(); ?>   
    </head>
    <body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php bloginfo ('url') ?>"><?php bloginfo('name') ?></a>
        </div>
        <div class="navbar-collapse collapse">
		
          	<?php 
				wp_nav_menu(
					array(			
						'theme_location' => 'haupt-menu',
						'menu_class' => 'nav' ));
			?>		
        
        
        
          <form class="navbar-form navbar-right" role="form">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </div>
Ich hatte mich schon gewundrt, weil bei mir ja unter der Zeile

HTML: 
<div class="navbar-collapse collapse">

nur php Code kommt und keine statische Liste
 
Zuletzt bearbeitet:
Ist jetzt ungetestet, aber probier mal
PHP: 
<?php
   wp_nav_menu(array(	
   'theme_location' => 'haupt-menu',
   'menu_class' => 'nav navbar-nav',
   'container' => false ));
?>
 
Bah, WordPress... Ich glaube mich zu erinnern, das dies ein Bug ist. Ich dachte aber, der wäre inzwischen gefixt worden. Hast du die aktuellste Version (4.0) installiert?

Hast du das Menu im Admin Backend korrekt angelegt und zugeordnet? Falls nicht, kann es sein das dem div-Container die Klasse eingetragen wird, die eigentlich das ul haben sollte... Wenn es daran nicht liegt, dann muss man noch mit den Parametern rumspielen, ich kriege das aber nicht mehr auswendig zusammen. Müsste wenn heute Abend mal schnell WordPress installieren und es selbst versuchen, dann kann ich da eher was zu sagen.

Edit: Die Lösung von Umbel könnte auch funktionieren.
 
@Umbel
Den Code werde Ich heute Mittag mal testen, wenn Ich aus der Schule zurück bin. Hoffentlich klappt es :S
@Speedy
Ja Ich hab Wordpress 4 drauf und das Menü habe Ich so angelegt wie es im Buch steht.
Gruß Rubi
Ergänzung ()

Umbel schrieb:
Ist jetzt ungetestet, aber probier mal
PHP: 
<?php
   wp_nav_menu(array(	
   'theme_location' => 'haupt-menu',
   'menu_class' => 'nav navbar-nav',
   'container' => false ));
?>
Zum Vergrößern anklicken....

Ne das hat auch nicht funktioniert. Alles so wie vorher. Das ist doch zum verrückt werden :(
 
Ich könnte dir anbieten, das ich mal direkt im Wordpress schaue. Leg mir einfach mal nen Account an und schick ihn mir per PM.
 
Das wäre super :)
 
Rubikalubi schrieb:
... Ne das hat auch nicht funktioniert. Alles so wie vorher...
Zum Vergrößern anklicken....

Füg mal testweise Deiner style.css folgende 3 Zeilen hinzu:

Code: 
.nav li          {list-style-type:none}
.nav li a        {position:relative; top:13px; font:normal 19px helvetica; color:#999}
.nav li a:hover  {text-decoration:none; color:#fff}

Smartass
 
Zuletzt bearbeitet von einem Moderator: (list-style-type:none hinzugefügt)
Ok Problem ist gelöst ;)

1. wie schon geschrieben muss die Classe "nav navbar-nav" heißen.
2. (Wie Speedy angemerkt hatte) Du musst ein Menü anlegen und dieses als haupt-menu definieren. Das was du mit 'theme_location' => 'haupt-menu' definierst

Die korrekte Lösung sieht jetzt also so aus:
PHP: 
<?php
   wp_nav_menu(array('theme_location' => 'haupt-menu', 'menu_class' => 'nav navbar-nav'));
?>
 
Zuletzt bearbeitet:
Super endlich klappt es :D
Vielen Dank für die Mühe :)
Ich muss anscheinend noch viel lernen. Arbeitest du in dem Bereich oder so?
 
Gern geschehen. Nach welchem Buch arbeitest du dich eigentlich ein?
Arbeite Nebenberuflich ab und zu mal mit Wordpress und Co.
 
Ich arbeite momentan mit dem Buch von Gino Cremer. Und zusätzlich dazu benutze Ich noch das Wordpress Handbuch von Alexander Hetzel
Gruß Rubi
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Ähnliche Themen

F
CSS/PHP: WordPress Template bearbeiten - Margin:0
Antworten
9
Aufrufe
1.518
FrazeColder
F
Natheedo
CSS CSS Menü - Submenü durchsichtig und überlappt Mouseover Effekt
Antworten
3
Aufrufe
2.200
Natheedo
Natheedo
O
HTML Wordpress Header bzw. Logo positionieren
Antworten
14
Aufrufe
4.638
octekin
O
H
css navigationsleiste wird zweizeilig
Antworten
2
Aufrufe
1.529
expironec
expironec
L.B.
[CSS + HTML] kleinere Probleme Webseite
2
Antworten
22
Aufrufe
3.847
L.B.
L.B.
Zurück
Oben

Willkommen auf ComputerBase!

Mit Werbung weiterlesen

Besuche ComputerBase wie gewohnt mit Werbung und Tracking. Die Zustimmung ist jederzeit widerrufbar.

Details im Privacy Center und in der Liste unserer Partner. Ein Widerruf ist möglich in der Datenschutzerklärung.

… oder ComputerBase Pro bestellen

Nutze ComputerBase ohne Werbebanner, Video-Ads und Werbetracking schon für 4 €/Monat oder 36 €/Jahr.

Mehr zu ComputerBase Pro

Bereits Pro-Nutzer? Hier anmelden.

Tracking: Wir und unsere 160 Partner verarbeiten personenbezogene Daten, indem wir mit auf Ihrem Gerät gespeicherten Informationen (z. B. eindeutige Kennungen in Cookies) ein Nutzungsprofil erstellen, um z. B. Anzeigen zu personalisieren. Verarbeitungszwecke: Genaue Standortdaten und Abfrage von Geräteeigenschaften zur Identifikation, Informationen auf einem Gerät speichern und/oder abrufen, Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen.

Impressum Kontakt Datenschutz