navbar dropdown and collapse not working[wordpress + bootstrap] - javascript

I am using bootstrap nav walker for my WordPress website but the dropdown is not showing up or collapse dont working
//bootstrap wp navbar code
<nav class="navbar navbar-expand-md navbar-light bg-light">
<?php bloginfo('name'); ?>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ml-auto">
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 3,
'container' => 'div',
'container_id' => 'navbarNavDropdown',
'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>
</div>
</nav>
//Functions php file
<?php
// Register Nav Walker Class_alias
require_once('wp-bootstrap-navwalker.php');
//Theme support
function wpb_theme_setup() {
//nav menu
register_nav_menus(array(
'primary' => __('Primary Menu')
));
}
add_action('after_setup_theme', 'wpb_theme_setup');

first: go to class-wp-bootstrap-navwalker.php file
looking for $atts['data-toggle'] ="dropdown";
replace it by $atts['data-bs-toggle'] ="dropdown";

The problem was because i try to load bootstrap css from footer.php
i try to include in function.php file with this code
function abc_load_my_scripts() {
wp_enqueue_script( 'boot1','https://code.jquery.com/jquery-3.3.1.slim.min.js', array('jquery'));
wp_enqueue_script( 'boot2','https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js', array('jquery'));
wp_enqueue_script( 'boot3','https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'abc_load_my_scripts', 999);

Related

Bootstrap Navbar won't toggle with Wordpress

I have the following problem, i just made a new theme (clean) and i wanted to start with a basic navbar from bootstrap. The problem is it doesn't collapse when i click on it (maybe 2px thats it).
I don't get any errors about jQuery version or errors that it doesn't find any jQuery. Maybe a conflict between the jQuery from Wordpress itself and bootstrap??
header.php
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Project name</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<?php
wp_nav_menu( array(
'menu' => 'main-menu',
'theme_location' => 'main-menu',
'depth' => 2,
'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><!--/.nav-collapse -->
</div>
</nav>
functions.php
/* Add bootstrap support to the Wordpress theme*/
function theme_add_bootstrap() {
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.0.0', true );
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'style-css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_add_bootstrap' );
// add fontAwesome
function fontAwesome(){
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts', 'fontAwesome');
It seem your is data-target="#navbar", so you must use value in parameter container_id is navbar
Found the solution!
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
these classes caused a problem that jQuery/Boostrap didn' know what to toggle, there were 2 navbar-collapse.

Meterializecss- Wordpress Dropdown Navigation

I show the WordPress menu items but do not show the dropdown . How do I show the dropdown menu ?
functions.php
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'TNCTR-OnePage' ),) );
Header.php
<div class="navbar-fixed">
<nav class="navbar-tp">
<div class="nav-wrapper">
<div class="container">
<?php
wp_nav_menu(array(
'menu' => 'primary',
'menu_class' => 'right hide-on-med-and-down'
));
?>
<?php
wp_nav_menu(array(
'menu' => 'primary',
'menu_class' => 'side-nav',
'menu_id' => 'mobilemenu',
'items_wrap' => '<ul id="slide-out" class="%2$s">%3$s</ul>'
));
?>
<i class="mdi-navigation-menu"></i>
</div>
</div>
</nav>
HTML ver.
http://pasted.co/b2fc8b68
Doesn't look like you assigned a theme location? https://codex.wordpress.org/Function_Reference/wp_nav_menu

Why did javascript stop working when I implemented ZF2 ACL?

I am using Bootstrap with my Zend Framework 2 app. The formatting was looking good until I implemented ACL controls. Now the only time the buttons are formatted is when the user's role is guest. Any ideas on what went wrong?
#Zend Framework2 folks: Is there any need to include the css and js files in the ACL list?
The ACL control from config/autoload/acl.global.php looks like:
return array(
'acl' => array(
'roles' => array(
'guest' => null,
'member' => 'guest',
'mentor' => 'member',
'board' => 'mentor',
'admin' => 'board',
),
'resources' => array(
'allow' => array(
'Register\Controller\Profile' => array(
'index' => 'guest',
'confirm' => 'member',
'process' => 'guest',
'edit' => 'member',
'saveEdit' => 'member',
'family' => 'member',
'delete' => 'member',
),
'Register\Controller\Index' => array(
'index' => 'guest',
'profile' => 'guest',
'login' => 'guest',
),
...and so forth for each controller and action (no other resources are included)
Here is the page layout template, default-layout.phtml showing the only javascript I use or pull in:
<?php echo $this->doctype(); ?>
<html lang="en">
<head>
<meta charset="utf-8">
<?php echo $this->headTitle('TJLA Registration')->setSeparator(' - ')->setAutoEscape(false) ?>
<?php echo $this->headMeta()
->appendName('viewport', 'width=device-width, initial-scale=1.0')
->appendHttpEquiv('X-UA-Compatible', 'IE=edge')
?>
<!-- Styles -->
<?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/tjla-tree.png'))
->prependStylesheet($this->basePath() . '/css/style.css')
->prependStylesheet($this->basePath() . '/css/bootstrap-theme.min.css')
->prependStylesheet($this->basePath() . '/css/bootstrap.min.css');
?>
</head>
<body>
<div class="masthead">
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container navbar-container">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse">
<?php echo $this->navigation('navigation')->menu()->setUlClass('nav navbar-nav'); ?>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<?php echo $this->content; ?>
<hr>
<footer>
<p>© <?php echo date('Y') ?> by Thomas Jefferson Leadership Academy. All rights reserved.</p>
</footer>
</div> <!-- /container -->
<!-- Scripts -->
<?php echo $this->inlineScript()
->appendFile($this->basePath() . '/js/jquery.min.js')
->appendFile($this->basePath() . '/js/bootstrap.min.js')
->appendFile($this->basePath() . '/js/respond.min.js', 'text/javascript', array('conditional' => 'lt IE 9',))
->appendFile($this->basePath() . '/js/html5shiv.js', 'text/javascript', array('conditional' => 'lt IE 9',));
?>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
Please excuse me for wasting your time. I discovered the problem; the page was overwritten with a previous version and the proper class was missing from the anchors. (role="button" class="btn btn-xs btn-primary")

how to properly replace a hover with off-canvas menu

I have a theme with two toggle menu options (standard and mobile with hover effect).I'm trying to replace the hover with an off-canvas menu solution taking in consideraion this described procedure.
After I've updated the css style code using the custom css field option, I've uploaded to the server and registered in script-calls.php(instead of calling in footer.php) classie.js and sidebarEffects.js files :
...
// Main Scripts
function register_js() {
if (!is_admin()) {
$url_prefix = is_ssl() ? 'https:' : 'http:';
// Register
wp_register_script('classie', THB_THEME_ROOT . '/assets/js/plugins/classie.js', 'jquery', null, TRUE);
wp_register_script('sidebarEffects', THB_THEME_ROOT . '/assets/js/plugins/sidebarEffects.js', 'jquery', null, TRUE);
// Enqueue
wp_enqueue_script('classie');
wp_enqueue_script('sidebarEffects');
wp_localize_script( 'app', 'themeajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}
}
...
The original theme mobile menu section in header.php looks like this:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="wrapper" class="open">
<!-- Start Mobile Menu -->
<nav id="mobile-menu">
<div class="menu-container custom_scroll">
<div class="menu-holder">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="mobile-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</div>
<div class="menu-footer">
<?php echo do_shortcode($menu_footer); ?>
<?php if (ot_get_option('menu_ls') == 'on') { do_action( 'thb_language_switcher' ); } ?>
</div>
</div>
<div class="spacer"></div>
</nav>
<!-- End Mobile Menu -->
<!-- Start Quick Cart -->
<?php do_action( 'thb_side_cart' ); ?>
<!-- End Quick Cart -->
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php } ?>
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</header>
<!-- End Header -->
...
(not so sure if it's ok), I've modified/replaced the above section with:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="st-container" class="st-container">
<!-- content push wrapper -->
<div class="st-pusher">
<nav class="st-menu st-effect-1" id="menu-1">
<!-- sidebar content -->
</nav>
<div id="st-trigger-effects"><button data-effect="st-effect-3">Menu</button></div>
<div class="st-content"><!-- this is the wrapper for the content -->
<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
<!-- Start Mobile Menu -->
<nav id="primary-navigation" class="st-menu st-effect-3" id="menu-3" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'notio-wp' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'notio-wp' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
<!-- End Mobile Menu -->
...
Also in footer.php I've closed these divs:
...
</div><!-- /st-content-inner -->
</div><!-- /st-content -->
</div><!-- /st-pusher -->
</div><!-- /st-container -->
</body>
</html>
Unfortunately, my result is not functional.The final goal is to obtain the off-canvas menu effect on the right side as alternative to the hover menu, using the existing toggle menu option (between off-side and standard menu), also using the existing burger menu button (when off-canvas is activated). Any thoughts or any other solution with the same effect will be much appreciated.Thanks

I want to apply an external js file that will autohide my navigation bar

I want to apply a js I found here on stackoverflow to my navigation bar. This is aimed to autohide it after a moment of inactivity. But I dont know how to include and apply the code to my navigation bar.
This is how my html goes
<div class="basic-wrapper">
<a class="btn responsive-menu pull-right" data-toggle="collapse" data-target=".navbar-collapse">
<i class='icon-menu-1'></i>
</a>
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php
if( get_option('custom_logo') ){
echo '<img src="'. get_option('custom_logo') .'" alt="" data-src="'. get_option('custom_logo') .'" data-ret="'. get_option('custom_logo_retina') .'" class="retina" />';
} else {
echo bloginfo('title');
echo '<br /><small>';
echo bloginfo('description');
echo '</small>';
}
?>
</a>
</div>
<div class="collapse navbar-collapse pull-right">
<?php
if ( has_nav_menu( 'primary' ) ){
wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 3,
'container' => false,
'container_class' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'ebor-main-menu',
'walker' => new ebor_bootstrap_navwalker()
)
);
} else {
echo 'Set up a navigation menu now';
}
if( get_option("header_social_link_1") )
get_template_part('loop/loop','socialheader');
?>
</div>
</div><!--/.container-->
</div><!--/.nav-collapse -->
This is the code I found-
$("div").hide();
$("html").mousemove(function( event ) {
$("div").show();
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
$("div").hide();
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}
If you are asign how to include an external javascript file, you need to do the following:
<script src="//path/to/external/js/file.js"></script>
As for the actual JS code, i dont think that will give you what you are looking for, as it will hide ALL DIVs on the page.
You'd want to replace that with something like. $("div#IDofMenuContatiner")...

Categories