PHP Wordpress: wp_nav_menu nimmt css Style nicht an

[Rubikalubi]

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 
				wp_nav_menu(
					array(			
						'theme_location' => 'haupt-menu',
						'menu_class' => 'nav' ));
			?>

und noch der CSS Code

.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

 

[Umbel]

Praktischer als jeder Code-Schnippsel wäre einfach die Seite zusehen.

 

[Rubikalubi]

Die Seite ist nicht online, die läuft beim mir lokal auf einem xampp Server.

 

[Umbel]

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.

 

[Rubikalubi]

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?

 

[Umbel]

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.

 

[Rubikalubi]

ok hab gerade noch was Guthaben bei Nitrado gefunden 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

 

[Umbel]

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:

<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:

<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?

 

[Rubikalubi]

So in etwa sollte es normalerweise aussehen.

hier ist der Code der Header.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

<div class="navbar-collapse collapse">

nur php Code kommt und keine statische Liste

 

[Umbel]

Ist jetzt ungetestet, aber probier mal

<?php
   wp_nav_menu(array(	
   'theme_location' => 'haupt-menu',
   'menu_class' => 'nav navbar-nav',
   'container' => false ));
?>

 

[Speedy.]

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.

 

[Rubikalubi]

@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 (19. September 2014)

Ist jetzt ungetestet, aber probier mal

<?php
   wp_nav_menu(array(	
   'theme_location' => 'haupt-menu',
   'menu_class' => 'nav navbar-nav',
   'container' => false ));
?>

Ne das hat auch nicht funktioniert. Alles so wie vorher. Das ist doch zum verrückt werden

 

[Umbel]

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.

 

[Rubikalubi]

Das wäre super

 

[Smartass]

... Ne das hat auch nicht funktioniert. Alles so wie vorher...

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

.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

 

[Umbel]

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
   wp_nav_menu(array('theme_location' => 'haupt-menu', 'menu_class' => 'nav navbar-nav'));
?>

 

[Rubikalubi]

Super endlich klappt es
Vielen Dank für die Mühe
Ich muss anscheinend noch viel lernen. Arbeitest du in dem Bereich oder so?

 

[Umbel]

Gern geschehen. Nach welchem Buch arbeitest du dich eigentlich ein?
Arbeite Nebenberuflich ab und zu mal mit Wordpress und Co.

 

[Rubikalubi]

Ich arbeite momentan mit dem Buch von Gino Cremer. Und zusätzlich dazu benutze Ich noch das Wordpress Handbuch von Alexander Hetzel
Gruß Rubi