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
Post a Comment