html5 - Drop Down Navs not working with Bootstrap & Wordpress -
i'm using bootstrap create page templates wordpress site having trouble getting dropdown nav work when add child in wordpress menu screen.
here header code...
<body id="grad1"> <div class="mynavbar"> <div class="row"> <div class="col-md-3 col-sm-3 col-xs-1"> <img src="/wp-content/uploads/2015/07/logo_80px.png" class=" center-block space" alt="enter omnimark here"/> </div> <div class="col-md-6 col-sm-6 col-xs-0"> </div> <div class="col-md-3 col-sm-3 col-xs-1"> <img src="/wp-content/uploads/2015/07/omsemicircle.png" class=" center-block space" alt="enter omnimark here"/> </div> </div> </div> <nav class="navbar navbar-default navbar-fixed-top"> <div class="row"> <div class="container-fluid" id="fontfix"> <!-- collect nav links, forms, , other content toggling --> <div class="center-block"> <div class="collapse navbar-collapse column " id="navbar-collapse-2"> <ul class="nav navbar-nav"> <!--<li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">services</a></li> <li><a href="#">works</a></li> <li><a href="#">news</a></li> <li><a href="#">contact</a></li>--> <?php /* primary navigation */ wp_nav_menu( array( 'menu' => 'menu 1', 'depth' => 0, 'container' => false, 'container_class' => 'collapse navbar-collapse column', 'container_id' => 'navbar-collapse-2', 'menu_class' => 'nav navbar-nav', //process nav menu using our custom nav walker 'walker' => new wp_bootstrap_navwalker()) ); ?> <!--used list nav , exclude pages--> <!--<?php wp_list_pages(array('title_li' => '', 'exclude' => '615, 14',)); ?>--> <li><a href="" alt="">store</a></li> </ul> <!-- main jumbotron primary marketing message or call action --> <div class="module top widewrapper center-block"> <h1><span class="fontgreen">thin film</span><span class="fontblue"> product markings</span></h1> <p class="darktext">the world full of products , brands image gets lost in white noise of modern society. lauterbach group protects brand’s unique , inspiring image film product markings. thin film product markings provide exceptional decoration options, increased production efficiencies , supply chain savings environmental focus.</p> <!--<img class="center-block" src="/wp-content/uploads/2015/07/homepage_800.png" alt="" />--> </div> <div class="container mainbump"> i can provide functions code if help...
<?php //trying register menu /* theme setup */ add_action( 'after_setup_theme', 'wpt_setup' ); if ( ! function_exists( 'wpt_setup' ) ): function wpt_setup() { register_nav_menu( 'primary', __( 'primary navigation', 'wptuts' ) ); } endif; // register custom navigation walker require_once('wp_bootstrap_navwalker.php'); //menu registery function wpbootstrap_scripts_with_jquery() { // register script theme: wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.js', array( 'jquery' ) ); wp_register_script( 'custom-script', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) ); wp_register_script( 'custom-script', get_template_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', array( 'jquery' ) ); // either plugin or theme, can enqueue script: wp_enqueue_script( 'custom-script' ); } add_action( 'wp_enqueue_scripts', 'wpbootstrap_scripts_with_jquery' ); if ( function_exists('register_sidebar') ) register_sidebar(array( 'name' => 'sidebar', 'id' => 'sidebar', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', )); register_sidebar(array( 'name' => 'footer', 'id' => 'footer', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', )); register_sidebar(array( 'name' => 'sidebarmenu', 'id' => 'sidebarmenu', 'before_widget' => '', 'after_widget' => '', 'before_title' => '<h3>', 'after_title' => '</h3>', )); ?>
the 'depth' value in array 0, should change 2 or 3 if want more.
here's example wordpress wp_bootstraap_navkwalker() function.
<nav class="navbar" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div><!--end navbar-header--> <div class="collapse navbar-collapse menu-primary" id="bs-example-navbar-collapse-1"> <?php wp_nav_menu( array( 'menu' => '', 'theme_location' => 'primary', 'depth' => 3, 'container' => '', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div><!--end navbar-colapse--> </div><!--end container--> </nav> try , should good.
Comments
Post a Comment