Question posted in 
I’m creating a navbar using Twitter bootstrap, I have some costume CSS implemented in it:
<nav id="Navbar" class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
<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="http://www.linkedin.com/in/johntk86" >John Kiernan</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="nav navbar-nav" id="Navmenu">
<li id="active"><a href="index.html" >Home</a></li>
<li><a href="apps.html" >Apps</a></li>
<li><a href="qualifications.html" >Qualifications</a></li>
<li ><a data-toggle="modal" data-target="#myModal">Contact</a></li>
</ul>
<form id="search" action="#" method="post">
<div id="label"><i class="fa fa-search" for="search-terms" id="search-label"></i></div>
<div id="input"><input type="text" name="search-terms" id="search-terms" placeholder="Enter search terms..."></div>
</form>
<nav>
<div id="social-buttons">
<ul class="social list-inline">
<li><a href="http://stackoverflow.com/"><i class="fa fa-stack-overflow"></i></a></li>
<li><a href="http://linkedin.com/"><i class="fa fa-linkedin"></i></a></li>
<li><a href="http://twitter.com/"><i class="fa fa-twitter"></i></a></li>
<li><a href="http://github.com/"><i class="fa fa-github-alt"></i> </a></li>
<li><a href="#">
</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</nav>
I have a form implemented before my social media buttons, I’m trying to get the form to line up next to <div id="social-buttons"> in my navbar and have it responsive.
I modified the example found here to fit my code.
Is this achievable? I’ve been trying in vain for hours.
JS:
(function(window){
// get vars
var searchEl = document.querySelector("#input");
var labelEl = document.querySelector("#label");
// register clicks and toggle classes
labelEl.addEventListener("click",function(){
console.log("Im in here");
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
} else {
classie.add(searchEl,"focus");
classie.add(labelEl,"active");
}
});
// register clicks outisde search box, and toggle correct classes
document.addEventListener("click",function(e){
var clickedID = e.target.id;
if (clickedID != "search-terms" && clickedID != "search-label") {
if (classie.has(searchEl,"focus")) {
classie.remove(searchEl,"focus");
classie.remove(labelEl,"active");
}
}
});
}(window));
CSS:
#search {
position: absolute;
color: #888888;
left: 20px;
font-size: 20px;
padding-top: 15px;
}
#label {
width: 60px;
height: 100px;
position: absolute;
z-index: 60;
}
#input {
position: relative;
top: 20;
left: 60px;
width: 200px;
height: 40px;
z-index: 5;
overflow: hidden;
}
#input input {
position: relative;
top: 0;
left: -450px;
width: 450px;
height: 100%;
margin: 0;
margin: 20;
padding: 0 10px;
border: none;
background-color: #eee;
color: #000000;
font-size: 18px;
backface-visibility: none;
border-radius: 0;
transition: left 0;
}
#input input:focus {
outline: none
}
#input.focus {
z-index: 20
}
#input.focus input {
left: 0;
transition: left 0.3s;
}
2
Answers
Yes, this is possible, there are many ways you could approach it but I would do something like this:
HTML:
CSS:
I removed the
navwrap from around your social buttons because it is unnecessary and Bootstrap gives nav elements 100% width, which you don’t want in this case since you want the buttons to be inline with the other elements. Additionally, I have wrapped theformandsocial-buttonsdiv in a container, which can be treated as a table to take care of the vertical centering and also floated to the right.Bootply Example
It looks like you’re trying to do something like this which would mean placing your form inside the navbar-header div and go from there as far as positioning the form and the input so it covers your links.
Hopefully this helps.