Modify width to wrap navbar on bootstrap menu

Question

I did a dropdown menu with bootstrap, but i need it to be wrapped at 991px, not at 767 as default. I did some modifications so i cannot (or must not to not waste loads of time) download again a modified bootstrap.

this is the html code:

<nav class="navbar navbar-default menuu" data-spy="affix" data-offset-top="170">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active m"><a class="menun" href="#">Noticies</a></li>
        <li class="m"><a class="menun" href="#">Agenda</a></li>
        <li class="m"><a class="menui" href="#">e-Butllet&iacute;</a></li> 

        <li class="m"><a class="menun" href="#">Entitats</a></li>
        <li class="m dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Galeria
            <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Fotos</a></li>
                <li><a href="#">V&iacute;deos</a></li>
            </ul>
        </li> 
        <li class="m"><a class="menun" href="#">Col&middot;laboren</a></li>
        <li class="m"><a class="menun" href="#">Convocat&ograve;ries</a></li>
        <li class="m"><a class="menun" href="#">Sac solidari</a></li> 
        <li class="m dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Contacte
            <b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li><a href="#">Dades de contacte</a></li>
                <li><a href="#">e-mail</a></li>
                <li><a href="#">Facebook</a></li>
                <li><a href="#">Twitter</a></li>
            </ul>
        </li> 
        <li>
            <div id="custom-search-input">
                <div class="input-group col-md-12">
                    <input type="text" class="  search-query form-control" placeholder="Buscar" />
                    <span class="input-group-btn">
                        <button class="btn btn-warning" type="button">
                            <span class=" glyphicon glyphicon-search"></span>
                        </button>
                    </span>
                </div>
            </div>
        </li>
        <li>
        <div id="custom-lang-select">
                <div class="input-group col-md-12">
                    <select class="lang-query form-control" placeholder="idioma">
                    <span class="input-group-btn">
                        <option> catala </option>
                        <option> castella </option>
                        <option> swagili </option>
                    </span>
                    </select>
                </div>
        </div>
        </li>       
      </ul>
    </div>
  </div>
</nav>

is there any "simple" way to make it wrap at width that i want? Maybe with a jquery script? i need it cause i get an uggly effect on resize, some items fall down:

Thanks!

score 1 · Accepted Answer · edited May 23 '17 at 10:34

1

You will have to change bootstrap navbar breakpoint , there is already a solution to this check out this link

Change Navbar breakpoint in Bootstrap 3.3.2

edited May 23 '17 at 10:34

Community

1
1

answered Aug 31 '16 at 10:22

Mohit Arora

460
3
9

i'm using bootstrap 3.3.6, but i'll check it anyway, thanks! – JoelBonetR Aug 31 '16 at 10:33
This will work :) – Mohit Arora Aug 31 '16 at 10:35
yes, with very little changes, i'm posting the final result here to visitors can fins quick the solution, thanks! =) – JoelBonetR Aug 31 '16 at 10:37

score 0 · Answer 2 · answered Aug 31 '16 at 10:16

0

try add custom media query

like

@media(max-width:991px){
   .navbar-toggle{display:block;}
   .collapse{display:none;}
}

answered Aug 31 '16 at 10:16

Lalji Tadhani

14,041
3
23
40

it shows the hidden navbar-toggle, but not does the function... – JoelBonetR Aug 31 '16 at 10:31

score 0 · Answer 3 · answered Aug 31 '16 at 10:40

This is the final result that is working fine on Bootstrap's 3.3.6 (and must work fine too on 3.3.7). Thaks to @Mohit Arora and @Matthias.

/* Modify max-with to change breakpoint */
 @media (max-width: 991px) {
    .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;}
    .navbar-nav .open .dropdown-menu{position:static; float:none; width:auto; margin-top:0; background-color:transparent; border:0; -webkit-box-shadow:none; box-shadow:none;}}

Cheers!

Modify width to wrap navbar on bootstrap menu

3 Answers3