We Keep Coding

My navbar toggler arrow not working properly

I made a toggler button with an arrow icon (when menu show) and bars (when menu close), I have made the code as shown below. The problems I am facing are:
1.) When I first clicked the toggler, the 3 bar icons became arrows. But, when I click the toggler button again, it doesn't return to 3 bar icons. So, the toggler is incompatible when it is opened and closed. What should be, when the menu shows, the arrow icon appears and when the menu is closed that appears is the 3 bar icon.
2.) I've coded in CSS for the transitions in arrows, but it still doesn't work.
Can anyone help me?
function toggleMenu() {
if ($(".navbar-toggler").hasClass("collapsed")) {
$(".navbar-toggler").removeClass("active");
} else {
$(".navbar-toggler").addClass("active");
}
}
$(document).ready(function(){
$('.navbar-toggler').on('click', function(){
toggleMenu();
});
});
.navbar-toggler {
height: 35px;
border:none !important;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.active .icon-bar {
border-radius: 20px;
width: 35px;
}
.navbar-toggler.active .icon-bar::before {
border-radius: 20px;
width: 15px !important;
transform: rotate(-35deg);
top: -5px !important;
transition: tranform ease-in-out;
}
.navbar-toggler.active .icon-bar::after {
border-radius: 20px;
width: 15px !important;
transform: rotate(35deg);
bottom: -5px !important;
transition: tranform ease-in-out;
}
.navbar-toggler .icon-bar {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
width: 18px;
height: 5px;
display: block;
position: relative;
}
.navbar-toggler .icon-bar::before {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
top: -12px;
}
.navbar-toggler .icon-bar::after {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
bottom: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

In your JQuery you are checking for the "collapsed" class which is unecessary in my eyes as you always hide or show the content when you click the toggler. So you can just switch to the toggleClass() function from Jquery. I changed your code and left a comment where i made the changes. If i understood you right this is what you want it to look like
function toggleMenu() {
// the check for the "collapsed" claass is unecessary, you can simply toggle the class
$(".navbar-toggler").toggleClass("active");
}
$(document).ready(function(){
$('.navbar-toggler').on('click', function(){
toggleMenu();
});
});
.navbar-toggler {
height: 35px;
border:none !important;
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.navbar-toggler.active .icon-bar {
border-radius: 20px;
width: 35px;
}
.navbar-toggler.active .icon-bar::before {
border-radius: 20px;
width: 15px !important;
transform: rotate(-35deg);
top: -5px !important;
/*you misspelled transform and you need to add a time for the transition*/
transition: transform 1s ease-in-out;
}
.navbar-toggler.active .icon-bar::after {
border-radius: 20px;
width: 15px !important;
transform: rotate(35deg);
bottom: -5px !important;
/*you misspelled transform and you need to add a time for the transition*/
transition: transform 1s ease-in-out;
}
.navbar-toggler .icon-bar {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
width: 18px;
height: 5px;
display: block;
position: relative;
}
.navbar-toggler .icon-bar::before {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
top: -12px;
}
.navbar-toggler .icon-bar::after {
content: '';
position: absolute;
width: 35px;
height: 5px;
background-color: #2257A7;
border-radius: 50px;
content: '';
position: absolute;
left: 0;
bottom: -12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<a class="navbar-brand" href="#">Hidden brand</a>
<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

Hover function after scroll

I have a navbar that shrinks on scroll, the li's in the navbar-nav have an image, when the navbar shrinks on scroll the image stays but the text display becomes none.
I have a function that shows this text on hover after it disappears but i have a problem, i only want this function to work only after the navbar shrinks, and when the navbar goes to it's normal size i don't want this function to work, and another thing i want the function to display the text for each li separately because when i hover it shows all of the spans with the text, i only want the child of the li, i tried the .children() method but it didn't work, please help! here is my code:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
$('.home').hover(function() {
$(this).css('margin-right', '5px');
$('.navbar-nav li a span').css('display', 'block');
$('.navbar-nav li a').css('height', '155px');
$('.navbar-nav li a img').css('margin-right', '5px');
});
body {
padding-top: 50px;
min-height:800px
}
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-brand {
font-size: 30px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.navbar.shrink {
min-height: 35px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 15px;
}
nav.shrink .navbar-brand {
font-size: 25px;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
nav.shrink .navbar-nav li a span{
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav 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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active home"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Home</span></li>
<li class="active service"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Services</span></li>
<li class="active about"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>About us</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="text-center">
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>

to achieve the behaviour you want, you do not need to abuse javascript, of course it can be done with JS, but it is much easier and straightforwad is just to use CSS
just add this rule to your code:
nav.shrink .navbar-nav li:hover a span{
display: block
}
this is of course just example, but I am sure that using the CSS approach you will achieve your goal easier, faster and without extra performance overhead=)
Here is a working snippet:
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('nav').addClass('shrink');
} else {
$('nav').removeClass('shrink');
}
});
body {
padding-top: 50px;
min-height:800px
}
nav a {
padding-top: 20px !important;
padding-bottom: 20px !important;
font-size: 18px;
}
nav .navbar-toggle {
margin: 13px 15px 13px 0;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.navbar-brand {
font-size: 30px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.navbar.shrink {
min-height: 35px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
nav.shrink a {
padding-top: 10px !important;
padding-bottom: 10px !important;
font-size: 15px;
}
nav.shrink .navbar-brand {
font-size: 25px;
}
nav.shrink .navbar-toggle {
padding: 4px 5px;
margin: 8px 15px 8px 0;
}
nav.shrink .navbar-nav li a span{
display: none
}
nav.shrink .navbar-nav li:hover a span{
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav 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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li class="active home"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Home</span></li>
<li class="active service"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>Services</span></li>
<li class="active about"><img src="https://cdn0.iconfinder.com/data/icons/iconshock_guys/512/andrew.png" height="50" width="50"><span>About us</span></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="text-center">
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>

Bootstrap Nav Width Appears Different in Chrome

I have searched through a ton of articles here trying the fixes for this issue with no luck. Wanted to see if there is a fix for this I am overseeing on our company site.
Issue: I develop in FireFox and once was done with the beta version of the site I found a bug when viewing in Chrome. The issue is that the nav bar is shorter in Chrome & IE and looks perfect in FF and Safari. Below is the HTML and CSS for this section. You can see in the screen the differences in the way it's displaying if you click the image link. Thank You in advance for any insight!
Navigation Bar Issue
CSS
.navigation {
min-height: 50px;
}
.navigation .navbar {
border: none;
margin-bottom: 0;
min-height: 50px;
}
.navigation .navbar .navbar-brand {
color: #fff;
font-size: 40px;
font-weight: 700;
height: 70px;
line-height: 35px;
}
.navigation .navbar-default {
background-color: #0091D5;
box-shadow: 0 0px 10px rgba(0,0,0,.2);
border: none;
border-radius: 0;
clear: both;
}
.navigation .navbar-default .navbar-nav>li>a {
color: #fff;
font-weight: 700;
padding-top: 15px;
padding-bottom: 15px;
}
.navigation .navbar-default .navbar-nav>li>a:hover,
.navigation .navbar-default .navbar-nav>.active>a,
.navigation .navbar-default .navbar-nav>.active>a:hover,
.navigation .navbar-default .navbar-nav>.active>a:focus {
background: #FF7200;
color: #FFFFFF;
}
.navigation .btn-default:hover,
.navigation .btn-default:focus,
.navigation .btn-default:active,
.navigation .btn-default.active {
border-color: transparent;
}
HTML
<section id="menu">
<div class="navigation">
<div id="main-nav" class="navbar navbar-default" role="navigation">
<div class="container">
<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>
</div> <!-- end .navbar-header -->
<div class="navbar-collapse collapse">
<ul id="ulnav" class="nav navbar-nav">
<li> </li>
<li> Home</li>
<li>Water Damage</li>
<li>Fire</li>
<li>Drying Services</li>
<li>Restoration</li>
<li>Commercial</li>
<li>Reviews</li>
<li>Insurance & Financing</li>
<li>About</li>
<li class="cwaf-bg">Free Estimate</li>
</ul>
</div>
</div>
</div>
</div>
</section>

just try your snippet into codepen, and it's no problem in Chrome or Opera. both of them use webkit as engine
make sure your other style (global style) not give an effect to your navigation

insert text (menu) near navigation bar

I am using bootsrap 4 alpha 6, and midnight.js to change the color of navigation menu toggler. I want to insert a text (MENU) next to it. Example in the Capture. For text toggler I use fontawesome.
Thanks your time and help!
the source html
<div class="navigation-button">
<button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="fa fa-bars fa-2x"></span>
</button>
</div>
using midnight.js, will looks like this
<div class="navigation-button">
<button class="navbar-toggler navbar-toggler-right fixed-top" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation" style="position: fixed; top: 0px; left: 0px; right: 0px; overflow: hidden; height: 40px;"><div class="midnightHeader white-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(110%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(-110%) translateZ(0px);">
<span class="fa fa-bars fa-2x"></span>
</div></div><div class="midnightHeader blue-menu" style="position: absolute; overflow: hidden; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);"><div class="midnightInner" style="position: absolute; overflow: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; transform: translateY(0%) translateZ(0px);">
<span class="fa fa-bars fa-2x"></span>
</div></div></button>
</div>
It works ok, only I want to add a text to it.
now it looks like:
and I want
I tried
MENU<span class="fa fa-bars fa-2x"></span>
it looks

Try by adding display:inline; to your icon:
<span class="fa fa-bars fa-2x" style="display:inline;"></span>

Try doing this
MENU<span class="fa fa-bars fa-2x" style="display:inline;"></span>
This will make the icon an inline element (same as the text)
Also check to see if something is restricting the width of the element, also check the parent elements for this too. This may prevent the next from displaying inline with the icon.

I've manipulated some code which I answered here some time ago. Tested with my phone and it works. Its on Bootstrap. I am answering this question and drinking some wine. So, I will just close my computer soon after posting this answer. Hope is what you want.
<!doctype html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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"></script>
<script>
</script>
<style>
.navbar {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
.navbar-default .navbar-nav {
font-size: 15px;
}
.navbar-fixed-top {
min-height: 80px;
}
.navbar-nav>li {
position: relative;
}
.navbar-nav>li>a {
padding-top: 0px;
padding-bottom: 0px;
line-height: 80px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #fff;
background-color: #b4a28f;
}
.navbar-default .navbar-nav .dropdown-menu {
left: 0;
right: auto;
}
.dropdown-menu>.active>a,
.dropdown-menu>.active>a:hover,
.dropdown-menu>.active>a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #b4a28f;
}
#media (min-width: 768px) {
.navbar-nav>li>.nav-line {
position: absolute;
bottom: -1px;
left: 0;
background-color: #3178b9;
height: 3px;
width: 0%;
}
.navbar-nav>li:hover>.nav-line {
background-color: #3178b9;
height: 3px;
width: 100%;
-webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in;
}
.navbar-nav>li.active>.nav-line {
background-color: transparent;
}
}
#media (max-width: 767px) {
.navbar-nav > li > a {
line-height: 30px;
padding-top: 10px;
padding-bottom: 10px;
}
#footer {
color: #2e2e2e;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="row">
<div class="col-sm-10 visible-sm visible-md visible-lg">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div class="col-xs-7 visible-xs">
<a class="navbar-brand" href="">
<img class="img img-responsive" src="www/images/srs.png" alt="SRS Constructions">
</a>
</div>
<div style="margin-top:15px;text-align:right;" class="col-xs-3 visible-xs">
<strong>Menu</strong>
</div>
<div class="col-xs-2">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse" aria-expanded="false">
<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>
</div>
<div class="collapse navbar-collapse navbar-right" id="collapse">
<ul class="nav navbar-nav">
<li class="active"><a class="main" href="#main">Home <span class="sr-only">(current)</span></a>
<div class="nav-line"></div>
</li>
<li class="dropdown" id="nav-about">
<a href="#about" class="dropdown-toggle main" role="button" aria-haspopup="true" aria-expanded="false">About
</a>
<ul class="dropdown-menu">
<li>The Founder</li>
<li role="separator" class="divider"></li>
<li>HSE Policy</li>
<li>Quality Policy</li>
</ul>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#services">Services</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#projects">Our Projects</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#whyus">Why Us</a>
<div class="nav-line"></div>
</li>
<li><a class="main" href="#contact">Contact</a>
<div class="nav-line"></div>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>

Search-bar not aligning in navbar

for some reason my expanding search bar won't align properly with the other items on my navbar. It shows on top while sign in and sign out is pushed below. I want them all one line like the new stack overflow navbar. What is the problem?
Both css and html shown below:
body {
padding-top: 65px;
}
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Linkin Park</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="active">Link0 <span class="sr-only">(current)</span></li>
<li>Link1</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<div class="form-group">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<li>Sign In</li>
<li>Sign Out</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Thank you very very very much in advance! :-D

You forgot to wrap the div within <li></li>.
Working snippet
body {
padding-top: 65px;
}
.form-group {
padding-top:10px;
}
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Linkin Park</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="active">Link0 <span class="sr-only">(current)</span></li>
<li>Link1</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="sear"><div class="form-group">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div></li>
<li>Sign In</li>
<li>Sign Out</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

Take look at this, search form and 'Sign In', 'Sign Out' links are in one line. I've changed you html bit, as tag can't hold tags.
body {
padding-top: 65px;
}
.search-form-holder {
margin: 0;
padding-top: 10px;
}
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Linkin Park</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="active">Link0 <span class="sr-only">(current)</span></li>
<li>Link1</li>
</ul>
<div class="form-group navbar-right search-form-holder">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label for="search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="search" placeholder="search">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Sign In</li>
<li>Sign Out</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>