I have the following bootstrap navbar snippet. It is not rendering properly and it is not responsive.

How do I make it responsive when the browser is resized, when the browser is zoom in or zoom out and when the browser size is reduced?

When I click on the navbar button its not working.

```
            <!DOCTYPE html>
            <html lang="en">
            <head>

                 <meta charset="utf-8">
                 <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1">
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
                    <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
                 <link rel="stylesheet" href="http://www.w3schools.com/w3css/w3.css">
                 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
                 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

            </head>

            <body>

                <div class="navbar navbar-default navbar-static-top">
                    <div class="container">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-responsive-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/homepage/index"><img src="https://s3-ap-southeast-1.amazonaws.com/elasticbeanstalk-ap-southeast-1-419372602220/Customer_Banner+(2).jpg" height="50px"></a>
                        <div class="navbar-collapse navbar-responsive-collapse collapse" style="height: 0.571428596973419px;">

                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="/admins/sign_in">Sign In</a></li>
                                <li><a href="http://workpro.co.in" target="_blank">WorkPro</a></li>
                                <!-- <li><a href="WorkPro.co.in">WorkPro</a></li> -->
                            </ul>
                        </div>
                    </div>
                </div>

            </body>
            </html>

```

[here is the fiddle link](https://jsfiddle.net/fmx06sxa/)