bootstrap3 make menu collapse sooner

Question

I've seen similar questions but not the one that will help me..

I'm using Bootstrap 3 (without less) I would like the menu to collapse sooner like around 999px

Here's the basic code I'm using:

  <nav class="navbar navbar-inverse navbar-fixed-top" 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 class="navbar-brand" href="index.html">
    <!--  <span class="hidden-md hidden-lg hidden-sm">German Magic Farm</span> -->
          <img class="visible-xs" src="img/german-magic-farm-logo-sm.png" width="93" height="102" alt="German Magic Farm Logo" longdesc="index.html">
        <img class="hidden-xs" src="img/german-magic-logo-sm-bars.png" width="110" height="133" alt="German Magic Farm Logo" longdesc="index.html"></a>
        
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.html">Home</a>
                </li>
                <li>
                   <a href="meet-pam-bauer.html">Meet Pam Bauer</a>
                </li>
                <li>
                    <a href="services.html">Services</a>
                </li>
                   <li>
                    <a href="sales.html">Sales</a>
                </li>
                 <li>
                    <a href="clinics.html">Clinics</a>
                </li>
                 <li>
                    <a href="photo-gallery.html">Photo Gallery</a>
                </li>
                 <li>
                    <a href="contact.html"> Directions & Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

My test site is here: Test Site

Since I have not been able to figure out a way to move the text in the 'whole nav bar' over to the right a little more on viewports of about 1000 I thought maybe changing the brake point of the collapse might be easier...

Any Ideas?

score 1 · Answer 1 · edited May 23 '17 at 12:30

1

This thread leads to a solution in @Skelly's comment on the accepted answer. Change bootstrap navbar collapse breakpoint without using LESS

The comment attaches a Bootply in which all of the necessary css classes/media-queries are overridden. Just change the media query in the css from 1200px to 1000px or which ever makes the most sense in your case.

edited May 23 '17 at 12:30

Community

1
1

answered Jul 23 '15 at 18:37

Art Cooper

31
4

Oh I did see that post but someone further down said it wouldn't work for Bootstrap 3. That was why I asked anyway... so now I don't know what to do...?? – fourwhitesocks Jul 23 '15 at 20:19

score 0 · Answer 2 · answered Jul 23 '15 at 18:40

0

If you want to move the navbar to the right, you should make this change:

@media (max-width: 1000px){
.navbar-nav{
margin-left:20%;
}
}

Otherwise, the breaking point thing is answered in the other question as it's mentioned in the comment of Mr. Kumar.

answered Jul 23 '15 at 18:40

BahaEddine Ayadi

987
9
20

Thank you is there a way I can just center the text in the collapsed menu? – fourwhitesocks Jul 23 '15 at 20:23
You just make the navbar-nav have the property `text-align:center;` , or else, if you want that the text stay as is and just look somehow centered, you can increase the margin-left to be 40% , I just tried it and it'll look great for your website.You don't have to write it under a media query though.But if you want to add @media (max-width: 768px), that'll do the job as well.. – BahaEddine Ayadi Jul 23 '15 at 21:11
OH my gosh, thank you, yep I totally knew I could use the text-align:center but I ftp-ed (is that a verb lol) over a few different ways today to no avail, very frustrating because it worked great in develop tools... I so appreciate your help, I will try in the morning ;-) – fourwhitesocks Jul 23 '15 at 21:24
Happy that I was helpful. :) – BahaEddine Ayadi Jul 23 '15 at 21:48

score 0 · Answer 3 · answered Jul 23 '15 at 18:41

0

Add .navbar-right <ul class="nav navbar-nav navbar-right">

answered Jul 23 '15 at 18:41

vanburen

21,502
7
28
41

bootstrap3 make menu collapse sooner

3 Answers3