djangomaterializejquery-mobile-navbar

Django Materialize.css Navbar


I'm working on a Django webapp and I'm using Materialize for CSS I have placed the Materialize file in the static folder in the app. I have issues with the Navbar that it works fine when in full-screen but when I resize the browser the hamburger icon for mobile navbar doesn't work. When clicked on it, it just goes to the /# page and doesn't openup from the side as it should. Do I have to make any change in the Django or Javscript files files? How can I fix this issue?


Solution

  • Materialize uses a materialize.js file. This file needs to be in your static folders under js. (ie js/materialize.js) You then need to declare this file in your html template after the JQuery script statement as below. Have you done this?

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>