html - Bootstrap navbar responsiveness -


i'm having problem bootstrap navbar. have 3 links in left , 2 links in right. change min screen width of navbar 600px collapse problem after 768px, links stop moving/response screen change , 2 links right no longer visible before navbar collapse. how can fix this? or should change in getbootstrap.com/customize/ allow navbar further stick after 768px. thanks

here navbar code

    <nav class = "navbar navbar-default navbar-fixed-top">         <div class = "container">             <div class = "navbar-header">                 <button type = "button" class = "navbar-toggle collapsed" data-toggle = "collapse" data-target = "#navbar" aria-expanded = "false" aria-control = "navbar">                     <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 "/">project title</a>             </div>              <div class = "collapse navbar-collapse" id = "navbar">                 <ul class = "nav navbar-nav">                     <li><a href = "#">link 1</a></li>                     <li><a href = "#">link 2</a></li>                     <li><a href = "#">link 3</a></li>                 </ul>                 <ul class = "nav navbar-nav navbar-right">                     <li class = "divider-vertical"></li>                     <li>                         <p class = "navbar-btn">                             <a href = "#" class = "btn btn-default">login</a>                         </p>                     </li>                     <li>                         <p class = "navbar-btn">                             <a href = "#" class = "btn btn-default" role = "button" data-toggle = "modal" data-target = "#modal-sign-up" data-backdrop = "static" data-keyboard = "false">sign up</a>                         </p>                     </li>                 </ul>             </div>         </div>     </nav> 

i used http://getbootstrap.com/customize , change @screen-sm in media queries breakpoints 600px. break point works fine navbar items not working. here picture

http://pasteboard.co/1bvnw8ae.png

asyou can see, sign in button getting hidden adjust screen width, want keep moving left. end result before breakpoint 2 buttons in right hidden. how can make move more left adjust width? thanks

thanks editing question, here's want http://jsbin.com/nujime/1/

you either use bootstrap customize change

@screen-sm-min , @grid-float-breakpoint variable desired value (600 in case),

@screen-xs-max , @grid-float-breakpoint-max yourvalue - 1 (599 in case),

and @container-sm yourvalue - 40(560 or else)

or can use bootstrap's sass/scss or less files work with.


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -