I am using the materialize.min.css and materialize.min.js and no other stylesheets.
I made a simple webpage. The code:
{% load static %}
<html>
<head>
<link type="text/css" rel="stylesheet" href="{% static 'css/materialize.min.css' %}">
<link type="text/javascript" href="{% static 'js/jquery-1.11.3.min.js' %}">
<title>
TITLE
</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>
<body data-marker-image="{% static 'img/truck3.png' %}">
<div>
<nav class="light-green lighten-3">
<div class="nav-wrapper">
<a class="brand-logo center" href="SITE" target="_blank">
LOGO<!-- <img src="{% static 'img/LOGO1.png' %}" style="height: 100%; width: 35%;"/> -->
</a>
</div>
</nav>
<div class="side-menu-bar">
<ul id="slide-out" class="side-nav full">
<li><a href="#!">About Us</a></li>
<li><a href="#!">Support</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse">
<i class="large mdi-navigation-menu white"></i>
</a>
</div>
</div>
<main>
<div id="map-canvas" style="width: 100%; height: 100%;">
<div id="onmap-div">
<div id="onmap-price"></div>
</div>
</div>
</main>
<footer>
<div class="page-footer light-green lighten-3">
<div class="container">
Footer Note
</div>
</div>
<div class="footer-copyright light-green lighten-2">
<div class="container">
Copyright
</div>
</div>
</footer>
<script type="text/javascript" src="{% static 'js/jquery-1.11.3.min.js' %}"></script>
<script type="text/javascript" src="{% static 'js/materialize.min.js' %}"></script>
<script>$(".button-collapse").sideNav();</script>
<script type="text/javascript">var shipment_id = {{shipment_id}};</script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-US"></script>
<script type="text/javascript" src="{% static 'js/socket.io.js' %}"></script>
<script type="text/javascript" src="{% static 'js/map.js' %}"></script>
<script>google.maps.event.addDomListener(window, 'load', initialize());</script>
</body>
</html>
The webpage made was like this: http://pasteboard.co/1hz4vuHF.png
As you can see from the image that the blue button is not coming on top of the NavBar.
How to fix it?
PS - Also How to change its color?
I think it's because you added the additional div
Try removing that.