mobile - bootstrap responsive navigation. Toggle button position -
i'm working on responsive template , can not sort out!!! so.... header , navigation has in mobile screen:
but i'm struggling because natural behave of navigation, see in desktop size:
the navigation grey bar, when resize, toggle button stays on grey bar, , can not move there!!!!!!! if cheat , use position absolute, every pixel resize moves.
and how looks on mine.... 
i've tried structure differently doesn't seem change anything. possible or trying impossible? tried make in jsfiddle doesn't mine.... http://jsfiddle.net/h4rp4noq/. know css mess, it's because i'm using 3 different files margin , paddings, colours , fonts , rest have told that. hope doesn't give headache.
html
<div id="navwrap"> <header> <div class="maincontainer"> <div id="logowrap" class="img-responsive col-md-12 col-sm-12 col-xs-24"> <img src="images/decorum_parta.png" alt=""/> <img class="hidden-sm hidden-xs" src="images/decorum_partb.png" alt=""/> </div> <div id="rightwrap" class="col-md-12 col-sm-12 col-xs-24"> <div class="rightbox col-md-12 pull-right"> <div class="col-md-24 blackbox"> <span class="textinbox">subscribe offers</span> <a href="#"><span class="icon-icn-sort_down iconheader pull-right"></span></a> </div> <div class="col-md-24 col-sm-24 col-xs-24 greybox"> <span class="textinbox">020 8969 6581</span> <a href="#"><span class="icon-icn-phone2 iconheader pull-right"></span></a> </div> <div class="col-md-24 col-sm-24 col-xs-24 greybox"> <span class="textinbox">contact us</span> <a href="#"><span class="icon-icn-envelope iconheader pull-right"></span></a> </div> </div> </div> <img id="logoonlybottles" class="img-responsive hidden-md visible-sm visible-xs clearfix" src="images/decorum_cheat.png" alt=""/> </div><!--closes main container--> </header> <div class="navicontainer"> <nav class="navbar navbar-default col-md-24"> <div class="navigationwrap col-md-18 col-sm-18 col-xs-24"> <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 class="active"><a href="home.php">home</a></li> <li><a href="some_page1.php">our philosophy</a></li> <li><a href="some_page2.php">offers</a></li> <li><a href="#">fine wine</a></li> <li><a href="#">tour & taste</a></li> <li><a href="#">contact</a></li> </ul> </div><!--/.nav-collapse --> </div> <div id="searchourwines" class="blackbox col-md-6 col-sm-6 col-xs-20 pull-right"> <span id="textsearchbox" class="textinbox">search our wines <span id="iconsearchbox"> <span class="icon-icn-bottle"></span> </span> </span> <div class="arrowboxes"> <a href=""> <span id="arrowsearch" class="icon-icn-sort_down"></span> <span id="arrowsearch2" class="icon-icn-sort_up"></span> </a> </div> <div class="clearfix"></div> <div id="browsecontent"> <div class="firstpartlist col-md-12 col-sm-12 col-xs-12"> <ul class="wineslist "> <li> <a href="#" class="country">france</a> <ul class="area"> <li><a href="#">bordeaux</a></li> <li><a href="#">burgundy</a></li> <li><a href="#">rhone</a></li> <li><a href="#">alsace</a></li> <li><a href="#">champagne</a></li> <li><a href="#">south-west</a></li> <li><a href="#">cote de provence</a></li> <li><a href="#">maconnais</a></li> <li><a href="#">chalonais</a></li> <li><a href="#">beaujolais</a></li> <li><a href="#">loire</a></li> </ul> </li> </ul> </div> <div class="secondpartlist col-md-12 col-sm-12 col-xs-12"> <ul class="wineslist "> <li> <a href="#" class="country">italy</a> <ul class="area"> <li><a href="#">friuli-venezia</a></li> <li><a href="#">piedmonte</a></li> <li><a href="#">sicily</a></li> <li><a href="#">toscana</a></li> <li><a href="#">veneto</a></li> </ul> </li> <li> <a href="#" class="country">germany</a> </li> <li> <a href="#" class="country">spain</a> </li> <li> <a href="#" class="country">new world</a> </li> </ul> </div> <div class="clearfix"></div> <div id="specificsearch" class="col-md-24 col-sm-24 col-xs-24"> <span>search specific</span> <form id="searchspecificbox" role="search"> <input type="text" class="form-control" placeholder="search" name="srch-term" id="srch-term"> <a href=""><span class="icon-icn-search"></span></a> </form> </div> </div> </div> </nav> </div> <div class="clearfix">
css
.maincontainer{ margin-left:7%; margin-right:7%; padding-bottom:1%; overflow:hidden; } .bigcontainer{ margin-left:7%; margin-right:7%; } /*header*/ header{ background-color:#585077; } #logowrap{ padding:0; } #logowrap img{ display:block; } .clearfix{ clear:both; } #rightwrap{ padding:0; } .rightbox{ margin-top:5%; padding:0; } #rightwrapsmall{ z-index:99; } .blackbox, .greybox{ padding:0; line-height:1.8; } .blackbox span.iconheader{ padding:1.5%; position: absolute; right: 0; } .greybox span.iconheader{ padding:1.2%; } .greybox{ margin-top: 0.5%; } .iconheader{ vertical-align: middle; } .textinbox{ padding-left: 5%; padding-right: 10%; } /*navigation bar*/ #navbar{ padding:0; } .navbar{ border-radius:0; min-height:40px; } .navbar.navbar-default{ border:0; margin:0; padding:0; } .navbar-default .navbar-nav > li > a{ color:#e0e0e0; } .navbar-nav > li > { padding-top:10px; padding-bottom:11px; } #navwrap{ background-color:#808080; } #arrowsearch2{ display:none; } .navigationwrap{ padding:0; } .navicontainer{ margin-left:7%; margin-right:7%; } /*search o wines*/ #iconsearchbox span.icon-icn-bottle{ position:absolute; right:12%; margin-top: 4px; } #iconsearchbox span.icon-icn-sort_down, #iconsearchbox span.icon-icn-sort_up{ position:absolute; right: 2%; top: 25%; } #searchourwines{ line-height: 1.8; margin-top: 2px; margin-bottom: 2px; } .arrowboxes{ display: inline; float: right; padding-right: 2%; border-left: 1px solid white; padding-left: 2%; margin-top: 1px; } .arrowboxes a{ color:white; font-size:1.2em; text-decoration:none; } /*inside search wine box*/ #browsecontent{ display:none; position: absolute; z-index: 999; width: 100%; } .wineslist{ height:100%; line-height: 1.5; list-style:none; margin-top:10%; margin-bottom:15%; padding:1%; } .wineslist ul{ list-style:none; } a.country{ text-transform: uppercase; text-decoration:none; } a.country:hover{ color:#585077; } .area a{ text-transform: capitalize; text-decoration:none; } ul.area{ padding-left:0; } #specificsearch{ padding:0 2%; } #specificsearch span{ vertical-align:middle; } #searchspecificbox{ width: 48%; display: inline-block; margin-left:2%; margin-top: 2%; margin-bottom: 2%; } #searchspecificbox input[type="text"]{ position:relative; } #searchspecificbox .icon-icn-search{ line-height:1.5; position: absolute; right: 3%; top: 15%; } #searchspecificbox .form-control{ display:inline; } header{ background-color:#585077; } .blackbox{ background-color:#000; color:#e0e0e0; } .greybox{ background-color:#ffffff; color:grey; } .blackbox span.iconheader{ font-size:1.2em; color:#fff; } .greybox span.iconheader{ font-size:1.3em; background-color:#fff; color:black; } /*navigation bar*/ .navbar.navbar-default{ background:#808080; } .navbar-default .navbar-nav > li > a{ color:#e0e0e0; } #navwrap{ background-color:#808080; } .navbar-toggle { background-color:white; } /*search our wines*/ #textsearchbox, #iconsearchbox span{ color:#e0e0e0; } #textsearchbox{ line-height: 2.3; } #iconsearchbox span.icon-icn-bottle{ background-color:black; font-size:1.8em; } #iconsearchbox span.icon-icn-sort_down, #iconsearchbox span.icon-icn-sort_up{ font-size:1.2em; } /*inside search wine box*/ #browsecontent{ background-color:#fff; } .firstpartlist{ border-right:1px solid #cccccc; } a.country{ color:#585077; font-size:22px; font-weight: bold; } a.country:hover{ color:#585077; } .area a{ color:#a1a1a1; font-weight: normal; } .area a:hover{ font-weight: bold; } #specificsearch{ background-color:#564e73; color:#e0e0e0; } #specificsearch span{ font-size:22px; } #searchspecificbox .icon-icn-search{ color:black; font-weight:bold; font-size:1.8em; } all appreciate it!!
thank you
here updated js fiddle
$(document).ready(function() { $('#arrowsearch').click(function() { $('#browsecontent').toggle(); $('#arrowsearch').css("display", "none"); $('#arrowsearch2').css("display", "inline"); return false; }); $('#arrowsearch2').click(function () { $('#browsecontent').toggle(); $('#arrowsearch2').css("display", "none"); $('#arrowsearch').css("display", "inline"); return false; }); }); 
Comments
Post a Comment