i trying make search input width 100% on re-size of screen (using @media (max-width: 1200px)) not working. problem:
how should (i able make right using exact width value on pixels don't think making right):
index.html file:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>moni bau</title> <link rel="icon" href="fotot/icon.png"> <link href="css/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainnavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="#" class="navbar-brand"><img src="fotot/logo.png" width="200px"></a> </div> <div class="collapse navbar-collapse" id="mainnavbar"> <div class="paddingsearch navbar-right"> <form class="navbar-form" role="search"> <div class="input-group"> <input type="text" class="form-control" placeholder="kërko" name="q"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button> </div> </div> </form> </div> <ul class="nav navbar-nav navbar-right paddingsearch"> <li><a href="#"><i class="glyphicon glyphicon-home"> </i>kryefaqja</a></li> <li><a href="#"><i class="glyphicon glyphicon-wrench"></i>produktet</a></li> <li><a href="#"><i class="glyphicon glyphicon-envelope"></i>kontakt</a></li> <li><a href="#"><i class="glyphicon glyphicon-user"></i>për ne</a></li> </ul> </div> </nav> </div> <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> </body> </html> and custom style.css:
body{ background-image: url(../fotot/background.png); margin: 0; padding: 0; font-family: century gothic,centurygothic,applegothic,sans-serif; } .navbar-brand { height: 80px; } .paddingsearch { padding-top: 15px; padding-bottom:15px; margin: 0; color: #1a0000; font-size: 12pt; } .paddingsearch i{ color: black; width: 20px; } .navbar-toggle { padding: 10px; margin: 25px 15px 25px 0; } .navbar-brand { display: flex; align-items: center; } @media (max-width: 1200px) { .navbar-header { float: none; } .navbar-left,.navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none!important; } .navbar-nav { float: none!important; margin-top: 7.5px; } .navbar-nav>li { float: none; } .navbar-nav>li>a { padding-top: 10px; padding-bottom: 10px; } .collapse.in{ display:block !important; } .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } }
change media query @media (min-width: 1200px) instead of max-width.
Comments
Post a Comment