In Materializecss, How To Open The Slide-out Menu From Right Rather Than Default Left?

In materialize CSS, the hamburger menu is on left by default. I changed the CSS and achieved it to right.But on clicking, the side-nav still slides out from left. I referred the do

Solution 1:

I've made you a fiddle here http://jsfiddle.net/8tw2u80q/3/. Hope this helps you.

  $('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240edge: 'right', // Choose the horizontal origincloseOnClick: true// Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
  );

You need to set edge: right.

Solution 2:

Here is what i meant in the comment below your question, after you initialize the menu, you can specify the correct options you want wit jquery and have the menu pop out on the right other than the left.

<scripttype="text/javascript">
      $('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240edge: 'right', // Choose the horizontal origincloseOnClick: true// Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
  );
</script>

This will move the menu to pop open on the right once you are in the correct screen size for the mobile menu to be displayed