Hi,
992px seems very large to collapse into a mobile layout?
You also seem to have answered your own question and you can just change the less variable to the width that you want (assuming you are using less).
If not then just over-ride the bootstrap rules in your custom stylesheet. Using my last example as an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="http://www.gkdesign.byethost12.com/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="http://www.gkdesign.byethost12.com/css/bootstrap-theme.css">
<!--<link rel="stylesheet" type="text/css" href="http://www.gkdesign.byethost12.com/css/custom.css">-->
<style>
/* CSS Document */
.top {
text-align:center;
background-image:url(http://www.gkdesign.byethost12.com/images/menu_sep.png);
background-repeat: repeat-x;
background-position:50% 50%;
}
.top .container {
width:auto;/* remove this if you want 1170px width*/
}
.mynavbar .nav {
float:none;
width:100%;
display:table;
}
.mynavbar .nav li {
display:table-cell;
float:none;
vertical-align:middle;
text-align:center;
padding:0;
margin:0;
}
.mynavbar .nav li a {
background-repeat:no-repeat;
width:121px;
height:62px;
line-height:62px;
margin:0;
padding:0;
float:none;
display:block;
background:url(http://www.gkdesign.byethost12.com/images/bg-link.png) no-repeat 0 0;
}
.mynavbar .nav li a:hover {
background-color:red;
}
.mynavbar .nav li.mylogo a, .mynavbar .nav li.mylogo a:hover {
background:none;
}
.mynavbar .nav li.mylogo, .mynavbar .nav li.mylogo a {
height:auto;
width:auto
}
.mynavbar .nav li.mylogo a img {
width:100%;
height:auto;
vertical-align:middle;
max-width:466px;
min-width:230px;
margin:10px 0;
}
.navbar-brand {
display:none
}
@media screen and (max-width:991px) {
/* added code */
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse{display:none!important;height:1px!important}
.navbar-collapse.collapse.in{display:block!important;height:auto!important}
.navbar-header{float:none}
/* */
.top {
background-image:none
}
.navbar-brand {
display:inline
}
.mynavbar .nav li {
display:block;
margin:0 auto;
width:auto;
border-bottom:1px solid #fff;
}
.mynavbar .nav li a {
border-radius:0;
display:block;
margin:0 auto;
}
.mynavbar li.mylogo {
display:none
}
}
</style>
<title>My website</title>
</head>
<body>
<header>
<nav class="navbar top navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<a href="#" class="navbar-brand">My Company Logo</a> </div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse mynavbar" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="leftendbutton"><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li class="mylogo"><a href="#"><img src="http://placehold.it/466x62"></a></li>
<li><a href="#">My Work</a></li>
<li class="rightendbutton"><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</header>
<!-- Bootstrap core JavaScript================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://www.gkdesign.byethost12.com/js/jquery.min.js"></script>
<script src="http://www.gkdesign.byethost12.com/js/bootstrap.min.js"></script>
</body>
</html>
I changed the media query width and then added an over-ride:
/* added code */
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse{display:none!important;height:1px!important}
.navbar-collapse.collapse.in{display:block!important;height:auto!important}
.navbar-header{float:none}
/* */
