How to make the header responsive?

Question

The header works perfectly in my laptop , when the browser screen is maximised. But when the browser screen is resized , it is not responsive, the post button disappears and search button changes its alignment and when checked for mobile responsiveness, it is totally misplaced.

 .navbar-fixed-top{ -webkit-box-shadow: 0 6px 6px -6px red; -moz-box-shadow: 0 6px 6px -6px red; box-shadow: 0 6px 6px -6px red; background: rgba(192, 192, 192, 0.1) } #logo{ margin-top: -5px; } /*Search field*/ #search{ font: 13px 'Lucida sans', Arial, Helvetica; color: #eee; text-align: center; } #search a { color: #ccc; } /*-------------------------------------*/ .cf:before, .cf:after{ content:""; display:table; } .cf:after{ clear:both; } .cf{ zoom:1; } /*-------------------------------------*/ .form-wrapper{ height :60px; } .form-wrapper input { width: 500px; height: 40px; padding: 10px 5px; float: left; font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 0; margin-top: 10px; margin-left: 150px; background: #eee; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; } .form-wrapper input:-moz-placeholder { color: #999; font-weight: normal; } .form-wrapper input:-ms-input-placeholder { color: #999; font-weight: normal; } .form-wrapper button { overflow: visible; position: relative; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; text-transform: uppercase; background: #d83c3c; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); top:-40px !important; margin-left: 373px; } .form-wrapper button:hover{ background: #e54040; } .form-wrapper button:active, .form-wrapper button:focus{ background: #c42f2f; } .form-wrapper button:hover:before{ border-right-color: #e54040; } .form-wrapper button:focus:before{ border-right-color: #c42f2f; } .form-wrapper button::-moz-focus-inner { border: 0; padding: 0; } /*End of search style*/ /* post button*/ .post{ height:5px; } .post button { overflow: visible; position: relative; border: 0; padding: 0; cursor: pointer; height: 40px; width: 110px; font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; text-transform: uppercase; background: #d83c3c; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); top:-49px !important; margin-left: 1100px; } .post{ width: 100% } .post button:hover{ background: #e54040; } .post button:active, .post button:focus{ background: #c42f2f; } .post button:hover:before{ border-right-color: #e54040; } .post button:focus:before{ border-right-color: #c42f2f; } .post button::-moz-focus-inner { border: 0; padding: 0; } 

 <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"><img src="images/logo.svg" id="logo"></a> </div> <div id="search"> <form class="form-wrapper cf"> <input type="text" placeholder="Search here..." required> <button type="submit">Search</button> </form> </div> <div class="post"> <button type="submit">POST</button> </div> </div> </nav> 

Answer 1

You can use @media annotation in css, or you can use bootstrap framework.

@media only screen and (max-width: 768px) {
    /*For mobile or iPad*/
    .post {
        width: 100%;
    }
}

Answer 2

Have you heard of css media queries . If not i advice that you read on them (a simple google search would do). A media query consists of an optional media type and zero or more expressions that limit the style sheets' scope by using media features. You can use media queries to tell you css to display or rearrange certain things at certain screen sizes.

For example

.size {
    width: 50%;
}

@media only screen and (min-width: 160px) and (max-width: 500px) {
    .size {
        width: 100%;
    }
}

This query would change .size width to 100% if screen size is less than 500px and revert back to 50% if screen size is greater than 500px

read more here

You could also try using responsive frameworks like

bootstrap

Edited part of your code to show examples but its advisable you learn media queries.

Your CSS

    .navbar-fixed-top{
    -webkit-box-shadow: 0 6px 6px -6px red;
    -moz-box-shadow: 0 6px 6px -6px red;
    box-shadow: 0 6px 6px -6px red;
    background: rgba(192, 192, 192, 0.1)
}

#logo{
    margin-top: -5px;
}

/*Search field*/
#search{

    font: 13px 'Lucida sans', Arial, Helvetica;
    color: #eee;
    text-align: center;
}

#search a {
    color: #ccc;
}

/*-------------------------------------*/

.cf:before, .cf:after{
  content:"";
  display:table;
}

.cf:after{
  clear:both;
}

.cf{
  zoom:1;
}

/*-------------------------------------*/   
/*EDITTED*/
.form-wrapper{
    height :50px;
    width: 100%;
}

/*EDITTED*/
.form-wrapper input {
    width: 500px;
    height: 40px;
    float: left;
    padding: 0 0 0 5px;    
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    margin-left: 150px;
    background: #eee;
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;      
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
}    

.form-wrapper button {
    overflow: visible;
    position: relative;

    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    float: left;
}   

.form-wrapper button:hover{     
    background: #e54040;
}   

.form-wrapper button:active,
.form-wrapper button:focus{   
    background: #c42f2f;    
}



.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before{
    border-right-color: #c42f2f;
}    

.form-wrapper button::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*End of search style*/

/* post button*/
.post{
    height:5px;
}
.post button {
    overflow: visible;
    position: relative;

    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;      
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
    top:-49px !important;
    margin-left: 80%;
}


.post{
    width: 100%
}   

.post button:hover{     
    background: #e54040;
}   

.post button:active,
.post button:focus{   
    background: #c42f2f;    
}



.post button:hover:before{
    border-right-color: #e54040;
}

.post button:focus:before{
    border-right-color: #c42f2f;
}    

.post button::-moz-focus-inner {
    border: 0;
    padding: 0;
} 

The Media Query

@media only screen and (min-width: 160px) and (max-width: 1200px) {
    .post {
        clear: both;
        margin: 50px auto 0 auto;
        text-align: center;
        margin-left: -45%;
    }
    .container-fluid {
        height: 120px;
    }
}
@media only screen and (min-width: 160px) and (max-width: 900px) {
    .form-wrapper input {
        width: 300px;
        margin-left: 20%;
    }
    }
@media only screen and (min-width: 160px) and (max-width: 535px) {
    .form-wrapper input {
        width: 150px;
    }
    .form-wrapper button {
        width: 100px;
    }
}   

HTML

<!--same as question-->

Hope you get how this works

Answer 3

Try with flex its easy to use, see my code its working for all devices

 * { padding: 0; margin: 0; box-sizing: border-box; outline: none; resize: none; } .navbar-fixed-top{ -webkit-box-shadow: 0 6px 6px -6px red; -moz-box-shadow: 0 6px 6px -6px red; box-shadow: 0 6px 6px -6px red; background: rgba(192, 192, 192, 0.1) } .navbar-brand { display:inline-block; } /*Search field*/ #search{ font: 13px 'Lucida sans', Arial, Helvetica; color: #eee; text-align: center; } .form-wrapper{ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; padding-left:10px; padding-right:10px; width:100%; } .form-wrapper input { -webkit-box-flex: 2; -webkit-flex: 2; -ms-flex: 2; flex: 2; height: 40px; padding: 10px 5px; font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 0; background: #eee; -moz-border-radius: 3px 0 0 3px; -webkit-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .form-wrapper input:focus { outline: 0; background: #fff; -moz-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.8) inset; box-shadow: 0 0 2px rgba(0,0,0,.8) inset; } .form-wrapper input:-moz-placeholder, .form-wrapper input:-ms-input-placeholder, .form-wrapper input::-webkit-input-placeholder { color: #999; font-weight: normal; } .btn-style { overflow: visible; position: relative; border: 0; padding: 0 16px; cursor: pointer; height: 40px; font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma'; color: #fff; text-transform: uppercase; background: #d83c3c; -moz-border-radius: 0 3px 3px 0; -webkit-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3); } .btn-style:hover{ background: #e54040; } .btn-style:active, .btn-style:focus{ background: #c42f2f; } .btn-style:hover:before{ border-right-color: #e54040; } .btn-style:focus:before{ border-right-color: #c42f2f; } .btn-style::-moz-focus-inner { border: 0; padding: 0; } .container-fluid { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding:16px; } form { margin: 0; display:block; } @media only screen and (max-width: 767px) { .container-fluid { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 144px; } } 

 <nav class="navbar navbar-fixed-top"> <div class="container-fluid"> <a class="navbar-brand" href="#"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id="logo" width="100"></a> <form class="form-wrapper"> <input type="text" placeholder="Search here..." required> <button class="btn-style" type="submit">Search</button> </form> <div class="post"> <button class="btn-style" type="submit">POST</button> </div> </div> </nav>