i'm developing own wordpress theme first time, using bootstrap, , i've run issue when using wp-bootstrap-navwalker.
i've created 2 menus, 1 visible in sm, md , lg, , 1 visible in xs. in xs supposed collapsed, , open on pressing button, after added wp-bootstrap-navwalker html, no longer working.
here html:
<!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="description" content="storhamar kunstløp har dag nærmere 100 medlemmer og løpere på skøyteskole-, aspirant- og konkurransenivå. er man velkommen uansett ambisjonsnivå!"> <meta name="keywords" content="storhamar, sil, kunstløp, figure skating, hamar, skøyter, idrettslag, kunstløpklubb, skøyteklubb"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php wp_title(''); ?></title> <!--fonts--> <link href='https://fonts.googleapis.com/css?family=source+sans+pro:400,600,700' rel='stylesheet' type='text/css'> <!--icons--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <header class="container-fluid hidden-xs"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php header_image(); ?>" class="img-responsive center-block"></a> </header> <!-- navbar ================================================== --> <nav id="main-nav" class="navbar hidden-xs" data-spy="affix" data-offset-top="280"> <div class="container-fluid" id="main-nav-list"> <?php wp_nav_menu( array( 'menu' => 'primary-lg', 'theme_location' => 'primary-lg', 'depth' => 1, 'container' => 'div', 'container_class' => 'container-fluid', 'container_id' => 'main-nav-list', 'menu_class' => 'nav navbar-nav main-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div> </nav> <!-- mobile navbar ================================================== --> <nav id="mobile-nav" class="navbar mobile-nav navbar-default navbar-static-top visible-xs"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <?php wp_nav_menu( array( 'menu' => 'primary-xs', 'theme_location' => 'primary-xs', 'depth' => 1, 'container' => 'div', '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><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <a href="index.html"><img src="<?php header_image(); ?>" class="img-responsive visible-xs center-block"></a> <main class="container"> here functions.php:
<?php if ( ! isset( $content_width ) ) { $content_width = 660; } function silkunstlop_setup() { load_theme_textdomain('silkunstloplang', get_template_directory() . '/languages'); add_theme_support( 'title-tag' ); add_theme_support( 'automatic-feed-links' ); // register custom navigation walker require_once('wp_bootstrap_navwalker.php'); register_nav_menus( array( 'primary-lg' => __( 'hovedmeny stor', 'silkunstlop-wp' ), ) ); register_nav_menus( array( 'primary-xs' => __( 'hovedmeny liten', 'silkunstlop-wp' ), ) ); register_nav_menus( array( 'sidebar-menu' => __( 'sidemeny', 'silkunstlop-wp' ), ) ); register_nav_menus( array( 'sidebar-menu2' => __( 'sidemeny skøyteskole', 'silkunstlop-wp' ), ) ); } add_action('after_setup_theme', 'silkunstlop_setup'); //load theme css function theme_styles() { wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css'); wp_enqueue_style( 'main', get_template_directory_uri() . '/style.css'); } //load theme js function theme_js() { //adds jquery google's cdn. code pulled www.http://css-tricks.com/snippets/wordpress/include-jquery-in-wordpress-theme/ if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11); function my_jquery_enqueue() { wp_deregister_script('jquery'); wp_register_script('jquery', "http" . ($_server['server_port'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", false, null); wp_enqueue_script('jquery'); } wp_enqueue_script( 'bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true ); wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/custom.js', array('jquery'), '', true ); if ( is_singular() ) wp_enqueue_script('comment-reply'); } add_action( 'wp_enqueue_scripts', 'theme_styles' ); add_action( 'wp_enqueue_scripts', 'theme_js' ); function new_excerpt_more( $more ) { return '...'; } add_filter('excerpt_more', 'new_excerpt_more'); /** * register our sidebars , widgetized areas. * */ function arphabet_widgets_init() { register_sidebar( array( 'name' => 'aktuelt', 'id' => 'aktuelt', 'before_widget' => '<div class="col-sm-8 hashtag">', 'after_widget' => '</div>', 'before_title' => '<h2>', 'after_title' => '</h2>', ) ); register_sidebar( array( 'name' => 'footer', 'id' => 'footer', 'before_widget' => '<div>', 'after_widget' => '</div>', ) ); } add_action( 'widgets_init', 'arphabet_widgets_init' ); function searchresult() { printf( __('søkeresultat for: %s', 'silkunstloplang'), get_search_query()); } $args = array( // 'width' => 980, 'height' => 180, 'default-image' => get_template_directory_uri() . '/images/header.svg', 'uploads' => true, ); add_theme_support( 'custom-header', $args ); $args = array( 'default-color' => 'a9c5dd', 'default-image' => get_template_directory_uri() . '/images/background.jpg', 'default-attachment' => 'fixed', 'default-repeat' => 'none', 'default-position-x' => 'center', 'default-position-y' => 'center', 'uploads' => true, ); add_theme_support( 'custom-background', $args ); ?> does have clue issue originating?
thanks lot clues given, , let me know if should include more information!
best, elena
so found problem myself in end, after studying html once again inspect element.
i didn't realise div around nav superfluous , duplicated container added menu. after removed surrounding div class of "collapse navbar-collapse" menu collapsing menu worked again (opens on clicking button).
Comments
Post a Comment