我正在尝试在我的网页上实现一个导航栏。到目前为止，我已经做到了，但是当我尝试在移动设备上打开页面时，它没有显示任何导航栏链接。我遇到了这个“汉堡菜单”，下面的代码运行完美，唯一的问题是当我尝试替换时
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
with
<link type="text/css" rel="stylesheet" href="{% static 'competition/materialize.css' %}"/>
指的是我文件夹中的css文件，它将停止工作。停止工作是指可折叠菜单在移动设备上不起作用，在PC上，可折叠菜单显示为覆盖徽标文字。我需要在本地计算机上使用css文件才能编辑导航栏的颜色。
{% load static %}
<head>
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link type="text/css" rel="stylesheet" href="{% static 'competition/materialize.css' %}" media="screen,projection"/>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script>
<!-- this part is important! -->
$(document).ready(function () {
$(".button-collapse").sideNav();
});
</script>
</head>
<body>
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">JavaScript</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li><a href="collapsible.html">Javascript</a></li>
<li><a href="mobile.html">Mobile</a></li>
</ul>
</div>
</nav>
</body>