Unable to implement custom Navigation menu in Wordpress Theme

Question

Just starting today, I started to convert my html site to Wordpress theme, and things seemed well until I got stock with the custom navigation menu.

I tried to convert the following code to wordpress navigation menu but I have no clue how to mix Material Design Lite (external framework) and wordpress.

<div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
  <a href="#overview" class="mdl-layout__tab is-active">Overview</a>
  <a href="#features" class="mdl-layout__tab">Features</a>
  <a href="#features" class="mdl-layout__tab">Details</a>
  <a href="#features" class="mdl-layout__tab">Technology</a>
  <a href="#features" class="mdl-layout__tab">FAQ</a>
  <button class="mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored mdl-shadow--4dp mdl-color--accent" id="add">
    <i class="material-icons" role="presentation">add</i>
    <span class="visuallyhidden">Add</span>
  </button>
</div>

I just want to know if it's possible to create the same code above with

<?php wp_nav_menu( $args ); ?>

Should I pass in some parameter ? or should I alter the dashboard ? Since I'm new to wordpress some help would be great ! I would love to hear from you !

Try searching for nav_walker in wordpress

Prakash Rao
– Prakash Rao

2016-03-15 07:23:19 +00:00
Commented Mar 15, 2016 at 7:23 — Prakash Rao
– Prakash Rao, Commented Mar 15, 2016 at 7:23

Fil · Accepted Answer · 2016-03-15 08:35:41Z

1

Here's how you can do that

<div id="site-navigation" class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
<?php  
    $menuParameters = array(
        'container'       => false,
        'echo'            => false,
        'items_wrap'      => '%3$s',
        'depth'           => 0,
    );

    echo strip_tags( wp_nav_menu( $menuParameters ), '<a>' );
?>
<script type="text/javascript">
    $(document).ready(function(){
        $('#site-navigation a:first').addClass('mdl-navigation__link is_active');
        $('#site-navigation a').addClass('mdl-navigation__link');
    });
</script>
</div>

answered Mar 15, 2016 at 8:35

Fil

8,91118 gold badges64 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jennifer Over a year ago

Thank you, but the javascript codes addClass seems to be not working. Im still in search of the solution but cannot find any answer. I've also been looking at nav_walker in wordpress but I find it still unclear.

Fil Over a year ago

have you added the jquery library of the latest version in your header?

Jennifer Over a year ago

Yes, it is added but it's not working. Should I add the Jquery CDN?

Fil Over a year ago

That depends, try to your local jquery if it is in the right path.

Jennifer Over a year ago

I tried, but sadly it doesn't work.. I'm lost right now.

|

Collectives™ on Stack Overflow

Unable to implement custom Navigation menu in Wordpress Theme

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related