javascript - Bootstrap navbar width / max-width -
my bootstrap navbar links many, wraps (i think @ 970px) - don't want wrap, width of links in total 1020px. i've searched high , low answer :(
when add width of 1020px .navbar .navbar-collapse
nav bar little off center - how can 1020px width , stay centered?
.navbar .navbar-collapse { text-align: center; width:1020px; }
then how navbar not wrap collapse tablet?
**edit: here's html - (link names removed).
<!-- navigation --> <div class="container"> <!-- fixed navbar --> <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-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li><a href="#welcome">link 1</a></li> <li><a href="#who">link 2</a></li> <li><a href="#benefits">blah blah</a></li> <li><a href="#outline">blah blah blah</a></li> <li><a href="#package">the blah blah blah</a></li> <li><a href="#faq">blah</a></li> <li><a href="#testimonials">blah blah blah</a></li> <li><a href="#bonuses">blah</a></li> <li><a href="#buy" class="buynow">blah</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <!-- end fixed navbar --> </div>
here's additional css:
.navbar .navbar-nav { display: inline-block; float: none; vertical-align: top; } .navbar .navbar-collapse { text-align: center; width:1024px; white-space: nowrap; border: 3px dotted #ff00ff; } /* navbar */ .navbar-default { background-color: #f2b32a; border-color: #c89321; font-size: 13px; letter-spacing: -0.9px; } /* link */ .navbar-default .navbar-nav > li > { color: #fff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #333; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #d5d5d5; } .navbar { box-shadow: 1px 1px 3px #c89321; /* visibility: hidden; */ } .buynow{ font-size: 19px; }
have tried: white-space: nowrap; if reduce html/css minimum still has problem , post - others able check , confirm solution.
Comments
Post a Comment