CODEWITHSUNDEEP
wordpressmenu
Dhawal Mhatre
Dhawal Mhatre

Reputation: 435

Wordpress Menu with data scroll

I want to create below menu in wordpress

<ul class="nav navbar-nav">
      <li class="active"><a data-scroll href="#intro">Home</a></li>
      <li><a data-scroll href="#aboutIntro">About</a></li>
      <li><a data-scroll href="#featured-works">Services</a></li>
      <li><a data-scroll href="#profile">Company Profile</a></li>
      <li><a data-scroll href="#contactContent">Careers</a></li>
      <li><a data-scroll href="#contactIntro">Contact</a></li>
    </ul>

I have below code for creating menu...

<?php wp_nav_menu( array( 'container_class' => 'main-menu', 'container_id' => 'cssmenu', 'theme_location'  => 'primary') ); ?>

Don't know how to bring data-scroll in this <li> anchor...??

Can anyone help?

Upvotes: 1

Views: 933

Answers (2)

Hareesh Sivasubramanian
Hareesh Sivasubramanian

Reputation: 1260

What you're looking for is the Walker_Nav_Menu Class. Edit the HTML as needed.

Also make sure you edit the template which calls the wp_nav_menu function (mostly the header.php file) and add the walker parameter to it.

Upvotes: 0

Saqib Amin
Saqib Amin

Reputation: 1171

You will have to use a custom Nav Walker for that, here is one pre-built for adding a custom attribute to anchors: Handle custom anchor attributes with WordPress wp_nav_menu()

You can also use jQuery to add anchors like below:

jQuery('ul.nav a').each(function() {
  jQuery(this).attr('data-scroll', '');
});

Upvotes: 2

Related Questions