$(".search-field").focus(function () {
$(this).animate({ "width": "100%" }, "slow" );
// $(".logo").fadeOut();
});
$(".search-field").focusout(function () {
$(this).animate({ "width": "130px" }, "slow" );
// $(".logo").fadeIn();
});
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */
/*
* Following extensive research on cross-browser styling,
* credits go to Nicolas Gallagher, Jonathan Neal, Kroc Camen,
* and the H5BP development community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
z-index: 1;
}
/*
* Eliminate text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets must be separate.
* Adjust background color to suit your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* Improved default horizontal rule appearance
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove gap between audio, canvas, iframes, images, videos and bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Disable default fieldset styles
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
.hidden {
display: none !important;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
@media only screen and (min-width: 35em) {
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
}
@media print {
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size: 14px;
line-height: 1.5;
}
.top {
position: fixed;
height: 50px;
width: 100vw;
background-color: #24292e;
color: rgba(255, 255, 255, 0.75);
z-index: 10;
}
.container {
padding-top: 2px;
width: 980px;
margin-right: auto;
margin-left: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0
}
.nav-item {
padding: 12px;
float: left;
list-style: none;
}
.logo {
flex: unset;
}
.header-item {
display: flex;
flex-direction: row;
}
.nav-item1 {
width: 300px;
justify-content: space-around;
}
.nav-item3 {
width: 300px;
justify-con...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top" role="banner">
<div class="container">
<div class="nav-item1 header-item">
<div class="logo">Logo</div>
<div class="search">
<input type="text" class="search-field" name="search" placeholder="Search...">
</div>
</div>
<div class="nav-item2 header-item">
<ul class="nav">
<li class="nav-item">New</li>
<li class="nav-item">Home</li>
<li class="nav-item">Explore</li>
</ul>
</div>
<div class="nav-item3 header-item">
<div class="sign">
<div class="sign-in">Sign In</div>
<div class="sign-up">Sign Up</div>
</div>
</div>
</div>
</div>