Changing Bootstrap's fluid layout navbar collapse threshold

Question

The method of changing @media(max-width:979px) and @media(min-width:980) doesn't work for me (I want my website's navbar to collapse at 1024px). I search all over and it's all the same method. I even tried to change the @media(max-width:767) and its 768 pairs, but it doesn't work also (since my website collapses at that width, I presume that's the default collapse threshold for tablet display). What could be the problem?

My navbar is of navbar class, with its element consisting of a logo of tag at the left and

for the buttons.

I also use django in developing.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <!--
    <link rel="stylesheet" type="text/css" href="/static/global.css">
    -->
    <link rel="stylesheet" type="text/css" href="/static/smoothness/jquery-ui-1.10.0.custom.min.css">
    <link rel="stylesheet" type="text/css" href="/static/bootstrap/css/bootstrap.min.css">
    <!--[if ie]><meta content='IE=8' http-equiv='X-UA-Compatible'/><![endif]-->
    <link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet" type="text/css">   
    <!--link href="/static/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"-->      
    <link href="/static/bootstrap/css/paralax.css" rel="stylesheet" type="text/css">
    <link href="/static/bootstrap/css/main.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
            <link href="css/ie.css" rel="stylesheet"/>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>      
            <script src="js/css3-mediaqueries.js"></script>
    <![endif]-->




        <script src="/static/bootstrap/js/modernizr.custom.js"></script>    
        <script src="/static/js/jquery-1.9.0.js"></script>
        <script src="/static/js/jquery-ui-1.10.0.custom.min.js"></script>
        <script src="/static/bootstrap/js/jquery.scrolltotop.js"></script>
        <script src="/static/bootstrap/js/jquery-1.7.2.min.js"></script>
        <script src="/static/highcharts-3/js/highcharts.js"></script>
        <script src="/static/bootstrap/js/bootstrap.min.js"></script>
        <script src="/static/bootstrap/js/superfish.js"></script>

    <title>CoAssets Platform (BETA)</title>
</head>

<body>

    <!--div class="container-fluid"-->
        <div class="row-fluid">
            <div class="span12" id="topmenu">
            {% block topmenu %}{% endblock %}
            </div>
        </div>

        <div class="row-fluid" style="background-color:#ffad37">
            <div class="span12" id="submenu" style="padding-top:2px; padding bottom:2px">
            <ul class="nav nav-pills">          
                {% block submenu %}{% endblock %}
                <li class="pull-right"><a class="btn" href="/account/logout" style="font-size: 16px; font-family: 'PT Sans', sans-serif; text-align: center;">Logout</a>
                <li class="pull-right"><a href="/account/">Account</a></li>
            </ul>
            </div>  
        </div>
    <!--/div-->

    <!--div class="container-fluid"-->
        <div class="row-fluid">
            <div class="span12" id="main">
                {% block main_body %}{% endblock %}
            </div>
        </div> 
    <!--/div-->
    </br>
    <div class="container-fluid" id="copyright">    
        <div class="row-fluid">
            <div class="span4">
                <p>Legalise</p>
                <p>Contact Us</p>
            </div>
            <div class="span4">
                <p>Partners</p>
                <p>FAQ</p>
                <p>Definitions</p>
            </div>
            <div class="span4">
                <p><a  href="/util/">Admin</a></p>
            </div>
        </div>
        <div class="row-fluid" id="copyright">
            <div class="span12" id="footer">
                <p>Copyright of CoAssets.com &copy; 2013</p>
            </div>
        </div>      
    </div>


<script>
//script conflicts with some other jQuery scripts, so need to handle this script
jQuery.noConflict();
$(document).ready(function($){  
    $('.nav li').each(function() {
        var currentPath = window.location.pathname;
        var thisPath = $(this).children().attr('href');
        //alert("sub menu currentPath= "+currentPath+" thisPath= "+thisPath);
        $(this).removeClass('active');
        if (thisPath == currentPath && !$(this).hasClass('active')) {
            $(this).addClass('active');
        };
    });

    $('#menu li').each(function() {
        var currentPath = window.location.pathname;
        var thisPath = $(this).children().attr('href');
        var len = thisPath.length;
        //alert("top menu currentPath= "+currentPath+" thisPath= "+thisPath);
        $(this).removeClass('active');
        if (thisPath != '/' && thisPath == currentPath.substring(0,len) 
                                                    && !$(this).hasClass('active')) {
            $(this).addClass('active');
        } else if (thisPath=='/' && currentPath == '/')
        {
            $(this).addClass('active');
        };
    });
});
</script>


</body>
</html>

possible duplicate of [How to change navbar collapse threshold using Twitter bootstrap-responsive?](http://stackoverflow.com/questions/9405610/how-to-change-navbar-collapse-threshold-using-twitter-bootstrap-responsive) — Ben, Feb 22 '14 at 01:32

score 2 · Answer 1 · answered May 16 '13 at 18:40

You set the collapse width using the variables.less file or you can set it on the customization page, when downloading a compiled version of Twitter bootstrap. The variable is called "navbarCollapseWidth".

http://twitter.github.io/bootstrap/customize.html

score 0 · Answer 2 · answered May 16 '13 at 18:36

did you insert bootstrap-responsive.css? and where are you putting your css code? you should use your code in bootstrap-responsive.css or you should make a new ccs which calling bootstrap-responsive.css and then your changes can effect

please give me some code so i can help more :)

score 0 · Answer 3 · answered Mar 27 '14 at 21:28

One of the problems I was running into was by nav bar was hiding my main content when I shortened the width of my browser to medium sized screen. An easy solution would have been to change the length of my nav-bar titles, and even though it worked, it prevented me from having the titles I wanted.

The solution that worked was going into the bootstrap.min.css file and I did a search (CTRL-F) for navbar-collapse. I changed the following code:

@media(min-width:768px){
.container>.navbar-header,
.container>.navbar-collapse
{margin-right:0;margin-left:0}}

to

@media(min-width:1000px){
.container>.navbar-header,
.container>.navbar-collapse
{margin-right:0;margin-left:0}}

I stopped running into the problem of my navbar increasing in height. covering my main content.

Here is the page at full size:

enter image description here

Here are screenshots of my problems: enter image description here

This is after the fix enter image description here

score -1 · Answer 4 · answered Aug 27 '13 at 22:06

I had to change two lines in bootstrap-responsive.css (I am using Bootstrap 2.3 and went this route out of pure lazynsess)

Note, line numbers may be slightly off as I had made some previous edits.

line 940: @media (max-width: 979px) {

line 1091: @media (min-width: 980px) {

I wanted my navbar to collapse 'sooner' at a width of 1280. I changed max-width to 1279 and min-width to 1280. Success!

(I had issue with my nav-bar auto 'de-collapsing' when following the run of the mill 'just change the max-width variable')

'pologies, no jsfiddle (still lazy), try it for yourself and not on the d**n live website.

Changing Bootstrap's fluid layout navbar collapse threshold

4 Answers4