How can I change the bootrstrap navigation breakpoint?

Question

Here is an example of a bootstrap mobile navigation:

http://jsfiddle.net/jusuchyne/tupxwyqe/

If the page has a specific width, then the navigation menu switches to a mobile navigation menu. I want to change the page width where that switch happens to for example 800px. But I do not know how to do that. Do you have an idea?

html:

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<div class="row nav1">
    <nav class="navbar navbar-inverse" id="top-menu" role="navigation">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-target="#navbarCollapse" data-toggle="collapse">   <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>

                </button>
            </div>
            <!-- Collapse navigation -->
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="nav navbar-nav">
                    <li class="active"> <a href="#">HOME</a>

                    </li>
                    <li>    <a href="men.html">MEN</a>

                    </li>
                    <li>    <a href="#">WOMEN</a>

                    </li>
                    <li>    <a href="#">KIDS</a>

                    </li>
                    <li>    <a href="#">ACCESSORIES</a>

                    </li>
                    <li>    <a href="#">FOOTWEAR</a>

                    </li>
                    <li>    <a href="#">COSMETICS</a>

                    </li>
                    <li>    <a href="#">YOUR ACCOUNT</a>

                    </li>
                    <!-- <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">More<b class="caret"></b></a>

                                <ul class="dropdown-menu">
                                <li>
                                <a href="#">Example1</a>
                                </li>
                                </ul>
                                </li>
                                -->
                </ul>
                <!-- Search box -->
                <form class="navbar-form navbar-right">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
                        <div class="input-group-btn">
                            <button class="btn btn-info" type="submit"> <i class="glyphicon glyphicon-search"></i>

                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- End container-fluid -->
    </nav>
    <!-- End navbar-inverse -->
</div>

css:

  <style type='text/css'>
    .navbar {
    margin: 15px;
    font-family:'Raleway', sans-serif;
    background:#444444;
}
.navbar-inverse .navbar-nav>.active>a {
    background:#000000;
}
.navbar-inverse .navbar-nav > li > a {
    color: #F2DEDE;
}
  </style>

 <link rel="stylesheet" type="text/css" href="/css/result-light.css">

 <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

JS:

 <script type='text/javascript' src='//code.jquery.com/jquery-compat-git.js'></script>

 <script type='text/javascript' src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>