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
class to my menu item
?
Here is my header.php menu:
This is my js:
Here is my wordpress menu item:
<a href=" " rel="nofollow noreferrer"><img src=" " alt="Here is my wordpress menu item"></a>
Code:
.page-scroll
Code:
<a>
Here is my header.php menu:
Code:
<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:
Code:
$(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:
<a href=" " rel="nofollow noreferrer"><img src=" " alt="Here is my wordpress menu item"></a>