Wie man Bootstrap Multilevel Navigation erstellt

Ich verwende wp_bootstrap_navwalker um meine Bootstrap-Multilevel-Navigation zu verwenden. Aber hier zeigt sich nur 1 Level. Ich möchte mindestens 4 Stufen zeigen. Hier ist wp_bootstrap_navwalker.php Seitencodierung

 <?php /** * Class Name: wp_bootstrap_navwalker * GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker * Description: A custom WordPress nav walker class to implement the Bootstrap 3 navigation style in a custom theme using the WordPress built in menu manager. * Version: 2.0.4 * Author: Edward McIntyre - @twittem * License: GPL-2.0+ * License URI: http://www.gnu.org/licenses/gpl-2.0.txt */ class wp_bootstrap_navwalker extends Walker_Nav_Menu { /** * @see Walker::start_lvl() * @since 3.0.0 * * @param string $output Passed by reference. Used to append additional content. * @param int $depth Depth of page. Used for padding. */ public function start_lvl( &$output, $depth = 0, $args = array() ) { $indent = str_repeat( "\t", $depth ); $output .= "\n$indent

Auch für die Navgigation css benutze ich Bootstrap und benutze eine externe CSS namens main.css. Hier ist main.css:

 .navbar-default { background-color: #fdfdfd; font-size: 15px; font-weight: 400; font-family: 'Lato', sans-serif; border-top-color: #FFFFFF; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; border-left-color: #FFFFFF; padding: 0px; margin: 0px; } .navbar-default .navbar-brand { color: #86bd3c; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #ffffff; background-color: #f78d04; } .navbar-default .navbar-text { color: #86bd3c; } .navbar-default .navbar-nav > li > a { color: #86bd3c; line-height: 30px; padding-top: 6px; padding-bottom: 6px; margin: 0px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #ffffff; background-color: #f78d04; } .navbar-default .navbar-nav > li > .dropdown-menu { background-color: #fdfdfd; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a { color: #86bd3c; } .navbar-default .navbar-nav > li > .dropdown-menu > li > a:hover, .navbar-default .navbar-nav > li > .dropdown-menu > li > a:focus { color: #ffffff; background-color: #f78d04; } .navbar-default .navbar-nav > li > .dropdown-menu> li > .active{color:#fff;text-decoration:#f78d04;background-color:#337ab7;outline:0} .navbar-default .navbar-nav > li > .dropdown-menu > li > .divider { background-color: #f78d04; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #ffffff; background-color: #f78d04; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #ffffff; background-color: #f78d04; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #ffffff; background-color: #f78d04; } .navbar-default .navbar-toggle { border-color: #fff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #FFFFFF; color: #f78d04; } .navbar-default .navbar-toggle .icon-bar { background-color: #86bd3c; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #dcdcdc; } .navbar-default .navbar-link { color: #86bd3c; } .navbar-default .navbar-link:hover { color: #ffffff; } .navbar-toggle { border: none; background: transparent !important; } .navbar-toggle:hover { background: transparent !important; } .navbar-toggle .icon-bar { width: 22px; transition: all 0.2s; } .navbar-toggle .top-bar { transform: rotate(45deg); transform-origin: 10% 10%; } .navbar-toggle .middle-bar { opacity: 0; } .navbar-toggle .bottom-bar { transform: rotate(-45deg); transform-origin: 10% 90%; } .navbar-toggle.collapsed .top-bar { transform: rotate(0); } .navbar-toggle.collapsed .middle-bar { opacity: 1; } .navbar-toggle.collapsed .bottom-bar { transform: rotate(0); } 

Kann mir jemand sagen, wie ich meine Bootstrap-Navigation als Multi-Level-Navigation zeigen kann.

Solutions Collecting From Web of "Wie man Bootstrap Multilevel Navigation erstellt"