PHP Wordpress: wp_nav_menu nimmt css Style nicht an

Rubikalubi

Lt. Junior Grade
Dabei seit
Mai 2013
Beiträge
360
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
 

Rubikalubi

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Mai 2013
Beiträge
360
Die Seite ist nicht online, die läuft beim mir lokal auf einem xampp Server.
 

Umbel

Lt. Commander
Dabei seit
Jan. 2009
Beiträge
1.571
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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Mai 2013
Beiträge
360
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

Lt. Commander
Dabei seit
Jan. 2009
Beiträge
1.571
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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Mai 2013
Beiträge
360
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:

Umbel

Lt. Commander
Dabei seit
Jan. 2009
Beiträge
1.571
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:

Rubikalubi

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Mai 2013
Beiträge
360
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:

Umbel

Lt. Commander
Dabei seit
Jan. 2009
Beiträge
1.571
Ist jetzt ungetestet, aber probier mal
PHP:
<?php
   wp_nav_menu(array(	
   'theme_location' => 'haupt-menu',
   'menu_class' => 'nav navbar-nav',
   'container' => false ));
?>
 
S

Speedy.

Gast
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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Mai 2013
Beiträge
360
@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 ()

Ist jetzt ungetestet, aber probier mal
PHP:
<?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

Lt. Commander
Dabei seit
Jan. 2009
Beiträge
1.571
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

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Mai 2013
Beiträge
360
Das wäre super :)
 

Smartass

Cadet 4th Year
Dabei seit
Juni 2014
Beiträge
67
Zuletzt bearbeitet: (list-style-type:none hinzugefügt)

Umbel

Lt. Commander
Dabei seit
Jan. 2009
Beiträge
1.571
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:

Rubikalubi

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Mai 2013
Beiträge
360
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?
 

Umbel

Lt. Commander
Dabei seit
Jan. 2009
Beiträge
1.571
Gern geschehen. Nach welchem Buch arbeitest du dich eigentlich ein?
Arbeite Nebenberuflich ab und zu mal mit Wordpress und Co.
 

Rubikalubi

Lt. Junior Grade
Ersteller dieses Themas
Dabei seit
Mai 2013
Beiträge
360
Ich arbeite momentan mit dem Buch von Gino Cremer. Und zusätzlich dazu benutze Ich noch das Wordpress Handbuch von Alexander Hetzel
Gruß Rubi
 
Top