We Keep Coding

Search bar with navbar bootstrap

Here is the html of my document, I want to show fixed right side search bar on screen below 991px but did not able to get proper code. Below is the detailed code and link.
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand hidden-xs" href="#">CompAny</a>
<a class="navbar-brand visible-xs" href="#">C</a>
<form class="navbar-form pull-left" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>
</div>
</form>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Browse Courses</li>
<li>Active Courses</li>
</ul>
</div>
<!--/.navbar-collapse -->
</div>
</div>
Here is the css
#media(max-width:767px) {
.navbar .navbar-form {
width: 185px;
padding-left:0;
padding-right:0;
}
}
#media(min-width:768px) {
.navbar .navbar-form {
width: 250px;
}
}
.navbar .navbar-form {
padding-top: 0;
padding-bottom: 0;
margin-right: 0;
margin-left: 0;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
Reference link of the functionality i want to achieve http://jsfiddle.net/KSCvB/10/.Any help regarding this will be appreciate able.

My nav toggle will work only on two pages but not on the home page

So it works on mobile view for two of the pages - My Profile and My Reservation. However, it does not close again when I click on the toggle on the main home page.
<nav class="navbar navbar-default navbar-top">
<div class="container" style="max-width: 1140px;">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo">
<a href="/Default.aspx" class="navbar-brand">
<img src="/images/logo.png" style="width: 85px; margin-top: 16px; float: left;">
</a>
</div>
<div class="logo_mobile" style="display: none;">
<a class="navbar-brand" href="#">
<img src="/images/logo.png">
</a>
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" data-target=".navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><font>Home</font></li>
<%--<li><font>Services</font></li>--%>
<%--<li runat="server" id="btn_map"><font>Search</font></li>--%>
<li runat="server" id="btn_contactUs"><font>Contact Us</font></li>
<li runat="server" id="btn_myaccount"><font>My Profile</font></li>
<li runat="server" id="btn_myreservation"><font>My Reservation</font></li>
<li runat="server" id="btn_signup"><font>Sign Up</font></li>
<li runat="server" id="btn_login"><font>Log In</font></li>
<li runat="server" id="btn_signout"><font>Log Out</font></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</nav>
I'm not sure if it's the CSS issue though.
.navbar-header {
float: left;
}
}
.navbar-collapse {
max-height: 340px;
padding-right: 15px;
padding-left: 15px;
overflow-x: visible;
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
-webkit-overflow-scrolling: touch;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse:before,
.navbar-collapse:after {
display: table;
content: " ";
}
.navbar-collapse:after {
clear: both;
}
.navbar-collapse.in {
overflow-y: auto;
}
#media (min-width: 768px) {
.navbar-collapse {
width: auto;
border-top: 0;
box-shadow: none;
}
.navbar-collapse.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0;
overflow: visible !important;
}
.navbar-collapse.in {
overflow-y: auto;
}
.navbar-collapse .navbar-nav.navbar-left:first-child {
margin-left: -15px;
}
.navbar-collapse .navbar-nav.navbar-right:last-child {
margin-right: -15px;
}
.navbar-collapse .navbar-text:last-child {
margin-right: 0;
}
I've even tried JQuery but it won't budge. I also looked at the source code for the main page that it's not working on, and I cannot seem to detect any problems there because I actually use an another page for the header/nav to apply for all the pages.

How to line up the bottoms of image and text in a bootstrap navbar?

I have a reasonably basic bootstrap navbar as seen in code below.
The pieces I care about here are the logo unified_brand.png and the Contact link. I would like to somehow line up the bottoms of the brand image and Contact text link.
Is it possible to do it programmatically? I've been messing pixels with the padding and margins and it did the trick but it feels like there should be a better answer?
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: 100%;
padding: 0;
vertical-align: middle;
}
#navBarMain {
border-top: 5px solid #ff5c39;
border-bottom: 2px solid black;
padding-bottom: 10px;
background-color: white;
padding-top: 8px;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
<nav class="navbar navbar-default" id="navBarMain">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img style="" src="~/images/unified_brand.png" alt="Company Logo">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>

Small trick, works like charm, place an inline-block before the element you want to align with. For this to work, the parent tag must have a define height.
#navBarMain {
border-top: 5px solid #ff5c39;
border-bottom: 2px solid black;
padding-bottom: 10px;
background-color: white;
padding-top: 8px;
}
.small-trick{
width: 0 ;
height: 100%;
display: inline-block;
vertical-align: bottom;;
}
.navbar-header{
height: 37pt;
}
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: auto;
padding: 0;
vertical-align: bottom;
}
}
<nav class="navbar navbar-default" id="navBarMain">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="small-trick" ></div>
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img style="" src="~/images/unified_brand.png" alt="Company Logo">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact</li>
</ul>
</div>
</nav>

Bootstrap responsive - Textfield not receiving focus

I am using Bootstrap 3, my code is below. Shrink your browser to a small screen view. Click the Search icon, a search field will appear. I am trying to make this textfield receive focus, but I don't see it! $("#search_field").focus(); is not working. I think the problem is because the search button itself gets the focus, and I don't know how to give it to my textfield. Help!
HTML
<form>
<nav class="navbar navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav" aria-expanded="false" aria-controls="nav"> <span style="font-size:9px;">MENU</span><span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
<button id="test1" type="button" class="navbar-toggle btn-link btn-lg collapsed" data-toggle="collapse" data-target="#search_group" aria-expanded="false"> <span class="glyphicon glyphicon-search" aria-hidden="true"></span> </button>
<a class="navbar-brand" href="#"></a> </div>
<!-- end navbar-header -->
<div id="nav" class="navbar-collapse collapse">
<div id="navTop" class="navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown site-toggle" > <span style="color:#eaab00;">Links</span> <span class="caret"></span>
<ul class="dropdown-menu">
<li>Test</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- end nav -->
</div>
<!-- end container -->
</nav>
<div class="container">
<div class="row">
<div id="search_group" class="navbar-collapse collapse">
<div class="col-xs-12 input-group">
<input id="search_field" type="text" class="form-control" placeholder="Search the site..." />
<i class="glyphicon glyphicon-search form-control-feedback"></i> </div>
</div>
<!-- end col searchText -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</form>
JS
$(document).ready(function () {
$('#test1').on('click', function () {
//$('#test1').blur();
$("#search_field").focus();
})
});
CSS
/* Main styles */
body { margin-top: 125px; }
/* Main Nav */
nav {
background-color: #222222;
height: 50px;
}
nav .dropdown-menu {border: 1px solid #00b0ca;}
/* Small screen buttons */
nav button {
border: 0 !important;
border-radius: 0 !important;
}
nav button[aria-expanded="true"] {background-color: #00b0ca !important;}
nav button.btn-link {
padding-top: 12px;
}
nav button.navbar-toggle {
margin-top: 0;
margin-bottom: 0;
margin-left: 7px;
margin-right: 0;
width:50px;
height:50px;
}
nav button span { color: #fff; }
nav button span.icon-bar { background-color: #fff; }
nav .navbar-toggle .icon-bar {
width: 25px;
margin-left: 2px;
}
/* Breadcrumbs and Search */
#search_group {
background-color: transparent;
float:right;
width:25%;
}
#search_group>div { margin: 6px 0;}
/* Small screens - iPad portrait, Phones */
#media (max-width: 992px) {
body { margin-top: 50px; }
/* Breadcrumbs and Search */
#search_group {
background-color:#00b0ca;
float: none;
width: auto;
}
#search_group>div { margin: 10px 0;}
}

$(document).ready(function () {
$('#search_group').on('shown.bs.collapse', function () {
$("#search_field").focus();
})
});
https://jsfiddle.net/914sdezs/
Hope this is of help

Altering the state/position of a search form in a nav bar

I am trying to reposition a search form/button inside of my navbar with lingering problems. My CSS has changed many times, and I have gotten the form and button to move, but into weir alignment that either changes the nav bar or the search form. Here is my current CSS, which shows no changes from the default bootstrap state. I want to make the search form a little longer, and have the bar and form move slightly down and to the left, in position with the nav list:
<html>
<head>
<!-- Imported documents -->
<link rel = "stylesheet" href = "css/bootstrap.min.css">
<link rel = "stylesheet" href = "css/styles.css">
<meta charset="utf-8">
<title>TesterPage.</title>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed menuIcon" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Brand Logo -->
<a class="navbar-brand" href="#">
<img alt="Brand" src="assets/logo.gif" class="img-responsive" id="brandImage" />
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
About
</li>
<li class="dropdown">
Blog
</li>
<li class="dropdown">
Resume
</li>
<li class="dropdown">
Portfolio
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<label for="search" class="sr-only">Search Bar</label>
<input type="text" name="search" class="form-control" placeholder="Search" />
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
CSS:
.container {
background:#30302f;
}
.container a{
color: #fff;
}
.container a:hover{
text-decoration: underline;
color: #fff;
}
.menuIcon {
background:rgb(200,200,200);
}
.navbar-brand {
height:auto;
}
.navbar-default {
background-color: #30302f;
}
.navbar-default .navbar-nav>li>a {
color: #fff;
font-size: 18px;
font-weight: bold;
padding: 14px 14px;
top: 16px;
left: -50px;
text-transform: uppercase;
}
.navbar-form .navbar-right .form-class{
left: -30px;
top: 100px;
}
.navbar-default .navbar-nav>li>a:hover {
color: #fff;
text-decoration: underline;
}
#brandImage {
max-width:60%;
}
#media (max-width:600px) {
.navbar-brand {
width:95%;
padding:8px 2.5%;
}
#brandImage {
max-width:100%;
}
}
#media (min-width:990px) and (max-width:1200px) {
.navbar-brand {
width:250px;
}
}
Many thanks!
EDIT: I still try and edit the CSS code, and it slides my nav header to the left on the index, and misaligns it in other working pages :/