-1

I've search and searched but not of the answers are having the desired outcome for some reason. At the moment my navbar is collapsing at 768px, however I want it to collapse at 1200px instead, I've changed the @media in the CSS files accordingly to reflect this however it just doesn't seem to be taking any effect, what on earth am I doing wrong?

I've tried following the instructions like explained here: Change bootstrap navbar collapse breakpoint without using LESS but still nothing.

My site is http://www.yourtechgeek.co.uk/

Hope someone can help as I'm really scratching my head now.

TIA

Paul Redmond
  • 3,276
  • 4
  • 32
  • 52
justjay
  • 1
  • 2

2 Answers2

0

Looking at your site, it is defined for 768 pixels. Change into the following in file bootstrap.min.css or your own css file.

@media (min-width: 1200px)
  .container {
  width: 750px;
}
Gerard
  • 15,418
  • 5
  • 30
  • 52
0

to change the navbar break point , for example for the mobile hamburger to appear at 1200px , see this example snippet below

or see fiddle > fiddle

@media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin-top: 7.5px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in{
        display:block !important;
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <div class="navbar navbar-default">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">Bootstrap 3</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li class="dropdown active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Getting started <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://getbootstrap.com/getting-started/#download">Download Bootstrap</a></li>
                        <li class="divider"></li>
                        <li class="dropdown-header">Examples</li>
                        <li><a href="http://getbootstrap.com/getting-started/#template">Basic template</a></li>
                        <li><a href="http://getbootstrap.com/examples/starter-template/">Starter template</a></li>
                        <li><a href="http://getbootstrap.com/examples/grid/">Grids</a></li>
                        <li><a href="http://getbootstrap.com/examples/jumbotron/">Jumbotron</a></li>
                        <li><a href="http://getbootstrap.com/examples/navbar/">Navbar</a></li>
                        <li><a href="http://getbootstrap.com/examples/signin/">Sign-in page</a></li>
                        <li><a href="http://getbootstrap.com/examples/sticky-footer/">Sticky footer</a></li>
                        <li><a href="http://getbootstrap.com/examples/offcanvas/">Offcanvas</a></li>
                        <li><a href="http://getbootstrap.com/examples/carousel/">Carousel</a></li>
                        <li><a href="http://getbootstrap.com/examples/theme/">Theme</a></li>                        
                        <li class="divider"></li>
                        <li class="dropdown-header">Compatibility</li>
                        <li><a href="http://getbootstrap.com/getting-started/#migration">Migrating from 2.x to 3.0</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#browsers">Browser support</a></li>
                        <li><a href="http://getbootstrap.com/getting-started/#third-parties">Third party support</a></li>
                    </ul>
                </li>
                <li><a href="http://getbootstrap.com/css">CSS</a></li>
                <li><a href="http://getbootstrap.com/components">Components</a></li>
                <li><a href="http://getbootstrap.com/javascript">JavaScript</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="active"><a href="http://getbootstrap.com/customize">Customize</a></li>
            </ul>
        </div>
    </div>
   
    <div class="jumbotron">
        <h1>Twitter Bootstrap 3.0</h1>
        <p class="lead">Starter template with CSS and JS included.</p>
        <p><a class="btn btn-lg btn-primary" href="#fork">Fork this fiddle</a></p>
      </div>
</div>
Mihai T
  • 17,254
  • 2
  • 23
  • 32