1

I'm trying to make WordPress theme with the materialize framework but I'm really confused by the navbar part. I've searched on the internet but found nothing, it seems nobody works with materialize.

The only thing that I have found is to make it with nav_walker, like it is done in bootstrap but I don't know how to do it with materialize.

UPDATE:

Here is my navbar code;

   <div class="navbar">
        <nav>
              <div class="nav-wrapper">
                <a href="<?php bloginfo('url'); ?>" class="brand-logo"><?php bloginfo('title'); ?></a>
                <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>

                  <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'items_wrap' => '<ul class="right hide-on-med-and-down">%3$s</ul>' ) ); ?>


                    <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'items_wrap' => '<ul class="side-nav" id="mobile-demo">%3$s</ul>' ) ); ?>

              </div>
        </nav>
    </div>

PS: now would show menu but has these issues:

  1. drop-down menu not works.
  2. menu items are not linked.
  3. when try to make drop-down menu in wp-admin after save again items jump's out of parent items!.
  4. after create menu all notes will be clear!
  • 1
    I plan on working with materialize soon, post the menu code and I'll make the walker when I get time – Guerrilla Apr 29 '15 at 10:27
  • @Guerrilla Updated. I'm waiting for your result. Thanks. – Scott Wolter Apr 29 '15 at 11:16
  • I meant the HTML you want to achieve. I don't know what the materialize menu is supposed to look like so I can't tell what is wrong with your code. Show me the html and I'll show you how to do it in wordpress. – Guerrilla Apr 29 '15 at 11:25
  • here are html navbars and what i use is "Mobile Collapse Button" materializecss.com/navbar.html (last one) – Scott Wolter Apr 29 '15 at 11:32
1

I've made something like this:

    <div class="navbar-fixed"> 
   <nav>
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo"><?php _e('Logo', 'newborn'); ?></a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
            <ul class="right hide-on-med-and-down">
                <?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>
            </ul>
        <ul class="side-nav" id="mobile-demo">
          <?php wp_nav_menu( array( 'theme_location' => 'primary-menu' ) ); ?>
        </ul>

        </div>
    </nav>
        </div>

Plus this css:

.menu ul{display: none;}
.menu li:hover ul{display: block;}

And now it works....BUT!

Still issue No.4 which i said on the top exist (special when i add home link into navbar) and the dropdown menu is not so pretty! it's so simple without any change with their parent links.

  • I have a navwalker but I don't think its best way to go. I think wp_get_nav_menu_items might be a better way to go as using navwalker I am still having to play about with how I call it. Ideally you just want to call menu and thats it with no need to wrap it in a certain way. Hit me up on twitter (link in profile) if you want to discuss – Guerrilla Apr 30 '15 at 14:37
  • i found 2 themes made by materialize for wordpress in here 34sp.com/hosting-news/blog/… and here github.com/AndreaBarghigiani/andmore maybe by looking those you could find a solution. let me know... (also i added you on twitter). – Scott Wolter Apr 30 '15 at 20:24
1

There is no need to use a walker here.

This code will output the html from the mobile collapse example.

    <nav>
        <div class="nav-wrapper">
            <a href="#!" class="brand-logo">Logo</a>
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
            <?php

            $menu = array(
                'theme_location'  => 'main_menu',
                'menu_class'      => 'right hide-on-med-and-down',
                'container'       => false,
                'depth'           => 1
            );
            $menuMobile = array(
                'theme_location'  => 'main_menu',
                'menu_class'      => 'side-nav',
                'menu_id'         => 'mobile-demo',
                'container'       => false,
                'depth'           => 1

            );
            wp_nav_menu($menu);

            wp_nav_menu($menuMobile);

            ?>

            </ul>
        </div>
    </nav>

If it still gives you issues make a codepen with the HTML exactly as you want it and then I can see as working from an example doesn't tell me exactly what you want.

Update:

I have built a nav walker that works perfectly without the mobile menu but doesn't work if there is more that one drop down as the way the navwalker methods are called is not in order.

I tried setting a $currentItem property inside the walker so I could match the parent/child ID and class but when it starts getting called out of order this doesn't work.

I got it working by overriding the display_element to pass in extra args but I am not sure if this is the best approach so I will look into it a little more deeply tonight after I finish work.

  • hey man, thanks but this one not works two! the same issues like before i said. here is codepen link: codepen.io/robertnicjoo/pen/gpppqK – Scott Wolter Apr 29 '15 at 17:22
  • The above code outputs the HTML exactly as the "Mobile Collapse Button" example. That example doesn't have a dropdown. Your codepen drop down doesn't work for me (I think you might need to add jquery). Get it working how you want it and then I'll update my answer. Also I notice you are using jquery $ in global, if you try to do that on wordpress it wont work. You need to wrap it and pass jquery as a reference or use full name jquery. – Guerrilla Apr 29 '15 at 17:43
  • Hi, i edited now everything works fine. about jquery in my wp theme i saved all my codes in one .js file and called that file into my footer (has it any problem?!). – Scott Wolter Apr 29 '15 at 18:41
  • Yes, the $ sign is reserved as other frameworks can use it.This explain it: codex.wordpress.org/Function_Reference/… – Guerrilla Apr 29 '15 at 19:14
  • Alright, I'm waiting for your respond. Wish you success. ;-) – Scott Wolter Apr 30 '15 at 16:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.