Question: I am trying to make web app accessible by <http://LocalComputer/WebsiteName> on IIS.

I am able to access it by <http://computername:portnumber/>

So what does my binding need to be and do I need a static ip?

Any help or redirection to appropriate resources will be greatly appreciated!

Answer: 
1. Wrap your JS code for sideNav within `documentReady` event, and set parameter `closeOnClick` as `true`.
2. Bring your side menu (ul element with class"side-nav") at the same level of div with class `navbar-fixed` . This is to avoid known issues with overlay. See [this stackoverflow question and accepted answer](https://stackoverflow.com/questions/40927744/materialize-css-sidenav-overlay-covers-all-the-page)

```js
$( document ).ready(function(){
$('.button-collapse').sideNav({
      closeOnClick: true
    }
  );
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>

<div class="navbar-fixed">
    <nav>
        <div class="nav-wrapper">
            <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
            <a href="#" class="brand-logo right thin" title="bcgraphixx">Page Title</a>
            <ul class="right hide-on-med-and-down">
                <li><a class="waves-effect" href="#">Home</a></li>
                <li><a class="waves-effect" href="#">About us</a></li>
            </ul>
        </div>
    </nav>
</div>
<ul class="side-nav" id="mobile-demo">
   <li><a href="##"><center>MENU</center></a></li>
   <li><a class="waves-effect" href="#!">Home</a></li>
   <li><a class="waves-effect" href="#!">About us</a></li>
</ul>
```
simply code below....  

you need to add CDN of materialize sc,js and jquery js  

**Here is your fix nav bar**

```
      <div class="navbar-fixed">
        <nav class="nav-wrapper">
          <div class="container">
            <a href="" class="brand-logo">Picnic.lk</a>
            <a href="" class="sidenav-trigger" data-target="mobile-menu">
              <i class="material-icons">menu</i>
            </a>
            <ul class="hide-on-med-and-down right">
              <li><a href="#photos">Photos</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#contact">Contacts</a></li>
            </ul>
           </div>
         </nav>
       </div>

```

**your mobile nav bar (side nav)**

```
<ul class="sidenav grey lighten-2" id="mobile-menu">
    <li><a class="sidenav-close" href="#photos">Photos</a></li>
    <li><a class="sidenav-close" href="#services">Services</a></li>
    <li><a class="sidenav-close" href="#contact">Contacts</a></li>
</ul>

```

**Add below js code**

```
<script>
 $(document).ready(function(){
    //side navigation
    $('.sidenav').sidenav({
        //your additional code goes here
    });
 });

```