I'm creating a wordpress website from scratch and I have problem with page scroll to anchor. I'm using Bootstrap Nav Walker module for it, how should I add my .page-scroll
class to my menu item <a>
?
Here is my header.php menu:
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="#page-top">
<img id="#page-top" src="<?php echo get_template_directory_uri(); ?>/images/logo3.png" alt="Brand logo">
</a>
</div>
<?php
wp_nav_menu( array(
'menu' => 'primary',
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse navbar-right navbar-main-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker())
);
?>
<!-- Collect the nav links, forms, and other content for toggling -->
</div>
<!-- /.container -->
</nav>
This is my js:
$(function() {
$('.page-scroll a').bind('click', function(event) {
var $anchor = $(this);
var $anchor_scroll = $($anchor.attr('href')).offset().top;
var $anchor_scroll_calc = $anchor_scroll;
$('html, body').stop().animate({
scrollTop: $anchor_scroll_calc
}, 1500);
event.preventDefault();
});
});
Here is my wordpress menu item:
答案 0 :(得分:0)
转到wp_bootstrap_navwalker
$ item_output。='';
答案 1 :(得分:0)
使用强>
function add_nav_class($output) {
$output= preg_replace('/<a/', '<a class="scroll-link"', $output, 1);
return $output;
}
add_filter('wp_nav_menu', 'add_nav_class');
并且有效