CODEWITHSUNDEEP
cssnavmaterialize
Bijan
Bijan

Reputation: 8594

MaterializeCSS Navbar button not triggering side nav

I have the following code for a side-nav:

<ul id="slide-out" class="side-nav">
  <li><a class="subheader">Last Updated:</a></li>
  <li><a>Text Here</a></li>
  <li><div class="divider"></div></li>
  <li><a class="subheader">Subheader</a></li>
  <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
</ul>

I also have the following header code:

<header>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper blue darken-1">
                <a class="brand-logo center" href="#">Website Name</a>
  <ul class="right">
    <li><a data-activates="slide-out" class="button-collapse" href="#"><i class="material-icons">menu</i></a></li>
  </ul>
            </div>
        </nav>
    </div>
</header>

So why is the menu item not coming up in my nav bar and why is it not triggering the side nav?

Also, if i remove the button-collapse class, I am able to see the menu but clicking on it does not trigger side-nav

Here is my jsFiddle

Edit: My problem is not the icon, it's the fact that clicking on the menu icon/text does not activate the side navigation menu.

How do I make the side-nav work on mobile AND DESKTOP

Upvotes: 1

Views: 3657

Answers (3)

Hudson Santos
Hudson Santos

Reputation: 164

If you want the menu to be accessible on all screensizes you just have to add a simple helper class show-on-large to the .sidenav-trigger.

<header>
    <div class="navbar-fixed">
        <nav>
            <div class="nav-wrapper blue darken-1">
                <a class="brand-logo center" href="#">Website Name</a>
  <ul class="right">
    <li><a data-activates="slide-out" class="button-collapse show-on-large" href="#"><i class="material-icons">menu</i></a></li>
  </ul>
            </div>
        </nav>
    </div>
</header>

as shown here: https://materializecss.com/sidenav.html

Upvotes: 1

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

Class button-collapse was setting display:none in CSS due to following for desktop:

@media only screen and (min-width: 993px)
nav a.button-collapse {
    display: none;
}

Not sure the reason of it.

However you can use other class than button-collapse and it will work.

HTML:

<header>
            <div class="navbar-fixed">
                <nav>
                    <div class="nav-wrapper blue darken-1">
                        <a class="brand-logo center" href="#">Website Name</a>
          <ul class="right">
            <li><a data-activates="slide-out" class="my-btn" href="#"><i class="material-icons">menu</i></a></li>
          </ul>
                    </div>
                </nav>
            </div>   
</header>

JS:

(function($){
  $(function(){

    $('.my-btn').sideNav({
      edge: 'left', // Choose the horizontal origin
      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
      draggable: true // Choose whether you can drag to open on touch screens
    }
    );

  }); // end of document ready
})(jQuery); // end of jQuery name space

Fiddle: https://jsfiddle.net/6hfrw33n/

Upvotes: 2

Rohan Kangale
Rohan Kangale

Reputation: 971

  • Add this line in you js file $('.button-collapse').sideNav();

Upvotes: -2

Related Questions