when you reduce the browser window you will see a different layout for iphone....when i click the button the drop down menu opens up.....the button is not working similar to other page....the problem is when i reduce the browser window the button gets hidden for small screens...how to make the button to move simultaneously by reducing the browser window...working codehttp://defie.co/not working codehttp://jsfiddle.net/wGVUd/1/embedded/result/\[code\]<div class="container" id="expandingNavbar"> <a class="btn btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a> <a class="brand" href="http://stackoverflow.com/" style="padding-top: 0px; margin-left: 0px;"> <img alt="change" class="defieLogo" src="http://stackoverflow.com/images/defie_logo_only.png"> </a> <div class="nav-collapse collapse" style="height: 0px;"> <!-- <div id="customerInfoPrint" class="subDiv customerInfo"></div> --> <!-- <div class="subDiv headerMenu"> <div class="inline-block"> --> <!-- <ul class="nav"> <li style="padding-left: 107px;"> <a style="font-weight: bold;" href="http://stackoverflow.com/product.html" > MENU </a> </li> <li> <a style="color: #9b365a;" href="http://stackoverflow.com/solution.html" > <img alt="squareList" style="margin-right: 10px;" src="http://stackoverflow.com/images/cube_vendor.png">Vendors</a> </li> <li> <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 5px;" href="http://stackoverflow.com/solution.html" >Add New Vendor</a> </li> <li> <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 5px;" href="http://stackoverflow.com/solution.html" >Vendor List </a> </li> <li> <a id="smallLinks" style="font-weight: bold; font-size: 12px; padding-left: 0px; padding-right: 0px;" href="http://stackoverflow.com/solution.html" >Reports</a> </li> <li><a style="color: #9b365a;" href="http://stackoverflow.com/service.html" > <img alt="squareList" style="margin-right: 10px;" src="http://stackoverflow.com/images/cube_vendor.png">Purchase Transactions</a></li> <li class="iphonePartnerLink"><a style="color: #9b365a;" href="http://stackoverflow.com/partner.html" > <img alt="squareList" style="margin-right: 10px;" src="http://stackoverflow.com/images/cube_vendor.png">Product Life cycle</a></li> <li><a style="color: #9b365a;" href="http://stackoverflow.com/contact.html" > <img alt="squareList" style="margin-right: 10px;" src="http://stackoverflow.com/images/cube_vendor.png">RMA Transactions</a></li> </ul> --> <ul class="nav" style=""> <li> <a style="color: #cc0000; font-family: arial; font-size: 14px; font-weight: bold;" href="http://stackoverflow.com/"> MENU </a> </li> <li> <a style="color: #666; font-weight: normal;" href="http://stackoverflow.com/Vendor/list/?ps=create"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vendor.png"> Vendor </a> </li> <li> <a href="http://stackoverflow.com/Vendor" style="color:#14486b;font-weight:bold">Add New Vendor</a> </li> <li> <a href="http://stackoverflow.com/Vendor/list/?ps=create" style="color:#666">Vendor List</a> </li> <!--li> <a href="http://stackoverflow.com/Vendor" style="color:#666">Add New Vendor</a> </li--> <li> <a style="color: #666; font-weight: normal;" href="http://stackoverflow.com/Purchaseorder/Purchaseorder/?ps=list"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vendor.png"> Purchase Transactions </a> </li> <li> <a style="color: #666; font-weight: normal;" href="http://stackoverflow.com/"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vendor.png"> Product Life Cycle </a> </li> <li> <a style="color: #666; font-weight: normal;" href="http://stackoverflow.com/Purchaseorder/Purchaseorder/?ps=list"> <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vendor.png"> Vendor RMA </a> </li></ul><!--ul class="nav" style=""> <li style="padding-bottom: 5px; list-style: none; color: #333;"> <a style="color: #cc0000; font-family: arial; font-size: 14px; font-weight: bold;"href="http://stackoverflow.com/" > Menu </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #; "> <a style="color: #666; font-weight: bold;" href="http://stackoverflow.com/Inventory?ps=list" > <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_inventory.png"> Inventory </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #653921; "> <a style="color: #666; font-weight: bold;" href="http://stackoverflow.com/Vendor/List/?ps=create" > <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vender.png"> Vendors </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #653921; "> <a style="color: #666; font-weight: bold;" href="http://stackoverflow.com/questions/15669876/#" > <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vender.png"> Quote </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #9e1c20; "> <a style="color: #666; font-weight: bold;" href="http://stackoverflow.com/Purchaseorder/Purchaseorder/?ps=list" > <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vender.png"> Purchase Orders </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #ff5100; "> <a style="color: #666; font-weight: bold;" href="http://stackoverflow.com/questions/15669876/#" > <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vender.png"> Invoices </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #184179;"> <a style="color: #666; font-weight: bold;" href="http://stackoverflow.com/questions/15669876/#" > <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vender.png"> RMA </a> </li> <li style="padding-bottom: 5px; list-style: none; color: #184179;"> <a style="color: #666; font-weight: bold;" href="http://stackoverflow.com/questions/15669876/#" > <img alt="squareList" style="margin-right: 10px;" id="logo" src="http://stackoverflow.com/images/cube_vender.png"> Account Receivable </a> </li></ul--> <!-- </div> </div> --> <div style="display:inline-block; float:right; padding-right:10px;"> <a href="http://stackoverflow.com/Account/Logout"> <!--<span style="color: black; font-weight: bold; font-size: 20px; position: relative; ">Welcome !</span> </span> --> <span style="color: #0074bd;">[</span></a><a href="http://stackoverflow.com/Account/Logout/">Log out</a>] </div> </div><!--/.nav-collapse --> </div>\[/code\]
the icon is not moving inside when i reduce the browser window
- Thread starter PMK
- Start date