javascript - Updated to Bootstrap 3.2.0 - nav header alignment became misaligned afterwards -
what header looks after update: http://i.imgur.com/fpku9nm.png
here jsfiddle: http://jsfiddle.net/skly7/1/
the fiddle includes external resources css & js.
not sure how fix. ideas?
html nav is:
<header> <div class="headerstrip navbar navbar-inverse" role="navigation"> <div class="container"> <div class="row"> <div class="col-md-12"> <a href="//rsatestamle.dminsite.com/" class="logo pull-left"><img src="http://cdnll.amleo.com/images/art/amllogo.png" art="art" width="613" height="41" alt="aml logo" class="img-responsive"></a> <div id="topnavigationcontrols"> <div id="topnav"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <ul class="nav navbar-nav"> <li style="line-height: 20px;"><a class="amlphone" href="tel:1-800-543-8955" title="phone">1-800-543-8955</a> </li> <li style="line-height: 20px;"><a class="home" href=" //rsatestamle.dminsite.com/" title="home">home</a> </li> <li style="line-height: 20px;"><a class="myaccount" href="//rsatestamle.dminsite.com/login.aspx" title="login">login</a> </li> <li style="line-height: 20px;"><a class="shoppingcart" href="//rsatestamle.dminsite.com/cart.aspx" title="cart">cart</a> </li> <div class="hiringlink"><a class="nowhiring" href="/careers/a/66/" title="now hiring!">now hiring!</a></div> </ul> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="/categorylist.aspx">categories</a></li> <li><a href="/company-information/a/1/">about us</a></li> <li><a href="/catalogs.aspx">request catalog</a></li> <li><a href="https://www.youtube.com/user/leonard1885">videos</a></li> <li><a href="/customerservice.aspx">help</a></li> <li><a href="/email-deals/a/25/">email deals</a></li> <li><a href="/emaildeals/a/47_2/">subscribe</a></li> </ul> </div><!-- /.navbar-collapse --> </div> </div> </div> </div> </div> </div> </div> <div class="container white_bg"> <div class="headerdetails hidden-print"> <div class="pull-left"> <form class="form-search top-search" action="search.aspx" onsubmit="return validatesearch(this);" method="get"> <input type="text" class="input-medium search-query yui-ac-input" name="ss" id="ss" placeholder="search , find fast" title="search , find fast" onblur="if (this.value == '') { this.value = 'search , find fast'; }" onfocus="if ((this.value == 'search , find fast')||(this.value == 'search , find fast')) { this.value = ''; }" onkeypress="if ((this.value == 'please enter keyword or item #')||(this.value == 'search , find fast')) { this.value = ''; } else{ document.getelementsbyname('ss')[0].style.color='black'; }" autocomplete="off"> <input type="submit" title="search" class="btn btn-orange searchbutton" value="search"> </form> </div> <div class="pull-right"> <div id="floating-cart-link"> <ul class="nav topcart pull-left"> <li id="floating-list" class="carticon cart"> <a href=" //rsatestamle.dminsite.com/cart.aspx" class="cart-tools-total" title="shopping cart"> shopping cart <span class="label label-orange font14" id="cartitemsnumber">0 item(s)</span> - <span id="itemstotalcost">$0.00</span> <b class="caret"></b></a> <ul class="dropdown-menu topcartopen"> <li></li> </ul> </li> </ul> </div> <div id="cart-items-open" style="display: none;"></div> </div> </div> <div id="categorymenu"> <nav class="subnav"> <ul id="nav" class="nav-pills categorymenu"> <li><a href=" //rsatestamle.dminsite.com/categorylist.aspx" title="categories">categories <i class="glyphicon glyphicon-chevron-down icon-white"></i></a> <div> <ul id="nav"> <li> <a href="http://rsatestamle.dminsite.com/am-leonard-brand-tools/c/10000000/"> a.m. leonard </a> </li> <li> <a href="http://rsatestamle.dminsite.com/arborist-supplies-ropes-saddles-spurs-tree-support/c/p13/"> arborist supplies </a> </li> <li> <a href="http://rsatestamle.dminsite.com/container-production-pots-root-pouches-supports-weed-control-soilless-mix-wondersoil/c/p04/"> container production </a> </li> <li> <a href="http://rsatestamle.dminsite.com/greenhouse-production-hydroponics-frost-protection-shade-fabric-pots-trays-baskets/c/p05/"> greenhouse production </a> </li> <li> <a href="http://rsatestamle.dminsite.com/hand-tools/c/p01/"> hand tools </a> </li> <li> <a href="http://rsatestamle.dminsite.com/field-production/c/p03/"> field production </a> </li> <li> <a href="http://rsatestamle.dminsite.com/fertilizers-and-treatments/c/p15/"> fertilizers & treatments </a> </li> <li> <a href="http://rsatestamle.dminsite.com/herbicide-insecticide-fungicide/c/p16/"> herbicides, insecticides, fungicides </a> </li> <li> <a href="http://rsatestamle.dminsite.com/landscape-and-turf-management/c/p14/"> turf, landscape management </a> </li> <li> <a href="http://rsatestamle.dminsite.com/maintenance-supplies/c/p19/"> maintenance supplies </a> </li> <li> <a href="http://rsatestamle.dminsite.com/marking-tagging/c/p12/"> marking & tagging </a> </li> <li> <a href="http://rsatestamle.dminsite.com/material-handling/c/p11/"> material handling </a> </li></ul> <ul id="nav"> <li> <a href="http://rsatestamle.dminsite.com/measuring-surveying-testing/c/p02/"> measuring, surveying, testing </a> </li> <li> <a href="http://rsatestamle.dminsite.com/pest-control/c/p18/"> pest control </a> </li> <li> <a href="http://rsatestamle.dminsite.com/power-equipment/c/p08/"> power equipment </a> </li> <li> <a href="http://rsatestamle.dminsite.com/pruning/c/p10/"> pruning </a> </li> <li> <a href="http://rsatestamle.dminsite.com/safety/c/p07/"> safety </a> </li> <li> <a href="http://rsatestamle.dminsite.com/snow-and-winter/c/p20/"> snow & winter </a> </li> <li> <a href="http://rsatestamle.dminsite.com/sprayers%2c-spreaders-and-applicators/c/p17/"> sprayers, spreaders , applicators </a> </li> <li> <a href="http://rsatestamle.dminsite.com/watering-and-irrigation/c/p06/"> watering & irrigation </a> </li> <li> <a href="http://rsatestamle.dminsite.com/work-wear/c/p09/"> work wear </a> </li> <li> <a href="http://rsatestamle.dminsite.com/clearance/c/123456789/"> clearance </a> </li> <li> <a href="http://rsatestamle.dminsite.com/made-in-the-u+s+a/c/usa_2012/"> made in usa </a> </li></ul></div> </li> <li><a href=" //rsatestamle.dminsite.com/brands.aspx" title="brands">brands <i class="glyphicon glyphicon-chevron-down icon-white"></i></a> <div> <ul><li><a href="http://rsatestamle.dminsite.com/am-leonard-brand-tools/c/10000000/">a.m. leonard</a></li><li><a href="http://rsatestamle.dminsite.com/ames-true-temper/c/br_1001_13/">ames true temper</a></li><li><a href="http://rsatestamle.dminsite.com/ars/c/br_1001_20/">ars</a></li><li><a href="http://rsatestamle.dminsite.com/bahco/c/br_1001_24/">bahco</a></li><li><a href="http://rsatestamle.dminsite.com/corona/c/br_1001_59/">corona</a></li><li><a href="http://rsatestamle.dminsite.com/felco/c/br_1001_92/">felco</a></li><li><a href="http://rsatestamle.dminsite.com/florikan/c/br_1001_452/">florikan</a></li><li><a href="http://rsatestamle.dminsite.com/ginegar-poly-film/c/br_1001_530/">ginegar poly film</a></li><li><a href="http://rsatestamle.dminsite.com/haviland-plastic/c/br_1001_438/">haviland plastic</a></li><li><a href="http://rsatestamle.dminsite.com/king-of-spades/c/br_1001_315/">king of spades</a></li><li><a href="http://rsatestamle.dminsite.com/permaloc/c/br_1001_397/">permaloc</a></li><li><a href="http://rsatestamle.dminsite.com/plant-health-care/c/br_1001_405/">plant health care</a></li><li><a href="http://rsatestamle.dminsite.com/silky/c/br_1001_419/">silky</a></li><li><a href="http://rsatestamle.dminsite.com/solo/c/br_1001_247/">solo</a></li><li><a href="http://rsatestamle.dminsite.com/treegator/c/br_1001_284/">treegator</a></li><li class="brandsnavdropdown"><a href="//rsatestamle.dminsite.com/brands.aspx">all brands...</a></li></ul> </div> </li> <li> <a href=" http://rsatestamle.dminsite.com/new/c/p_new/" title="new products">new</a> </li> <li> <a href=" http://rsatestamle.dminsite.com/clearance/c/123456789/" title="clearance">clearance <i class="glyphicon glyphicon-chevron-down icon-white"></i></a> <div> <ul id="nav"> <li> <a href="http://iteminfo.amleo.com/poly/" target="_blank">poly remnant sale</a> </li> <li> <a href="/clearance/c/123456789/">clearance items</a> </li> </ul> </div> </li> <li> <a href=" //rsatestamle.dminsite.com/am-leonard-quick-how-to-guides/a/1001/" title="our how-to guides great reference work smarter!">guides</a> </li> <li> <a href=" //rsatestamle.dminsite.com/customerservice.aspx" title="customer service">customer care</a> </li> <li> <a href=" //rsatestamle.dminsite.com/email-deals/a/25/" title="email deals">email deals</a> </li> <li> <a href=" //rsatestamle.dminsite.com/catalogs.aspx" title="catalogs">catalog</a> </li> <li> <a href=" //rsatestamle.dminsite.com/quickorder.aspx">quick order</a> </li> </ul> </nav> </div> </div> </header>
got on track. here's jsfiddle.
however there still work done. bootstrap 3 changed lot of class terminology.
and you're using a lot of <ul> , <li> tags need converted <div>s drop-downs work.
i tried give lots of html comments along.
this time intensive project.
you may decide revert bootstrap 2 , stick original html file.
but comes big fat opinion. ignore @ will.
i'm hoping html generated sort of ui wordpress, since it's huge mess (hopefully that's not offensive).
it took me of time fixing indentation code readable.
if you're unfamiliar html, css , bootstrap, encourage spend time on tutorial sites getting more comfortable. think you'll have trouble tweaking rest of updates without working knowledge of these three.
Comments
Post a Comment