Twitter bootstrap – I have a few problems with designing a responsive header

Well, as I always said it’s faster, easier and, specially cleaner, to NOT use boostrap when you want to translate your design to web. Bootstrap is a tool to make fast responsive webs under Twitter own design. It’s good but NOT miraculous. IF you want your own designs on webs you NEED to know css, whatever to modified bootstrap or do it from scratch (and if you know css then you woudn’t use bootstrap too much).

I will start from scratch.

It’s easier when you start with your html layout without, yet, adding the main elements:

<header>
    <div class="container-menu-top">        
        <div class="menu-top">
            <div class="menu-top-center">
                <div class="icons-left">
                </div>
                <div class="container-login">
                    <div class="logo">
                    </div>
                    <div class="login">
                    </div>
                </div>
            </div>
            <div class="menu-top-right">
                <div class="social">
                </div>
                <div class="links">
                </div>
            </div>
        </div>
    </div>
    <div class="container-menu-bot">
        <div class="menu-bot">
        </div>
    </div>
</header>

And then you add css’s to position the layout correctly (and better if you use colors to make it easier to check everything is ok):

body {margin:0; padding:0;}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.container-menu-top {
    width:100%;
    background-color: aqua;
    height:160px;
}
.container-menu-bot {
    width:100%;
    background-color: aqua;
    height:60px;
    margin-top:40px;
}
.menu-top, .menu-bot {
    max-width:970px;
    width:100%;
    height:100%;
    background-color: green; 
    margin:0 auto;
    text-align:center;
    position:relative;
}
.menu-top-center {
    display:inline-block;
    background-color: red; 
    width:50%;
    height:100%;    
}
.menu-top-right {
    display:inline-block;
    float:right;    
    height:100%;
    background-color: violet; 
    width:150px; 
}
.icons-left {
    width:10%;
    float:left; 
    background-color: blue;
    height:100%;
}
.container-login {
    width:90%;
    float:left; 
    background-color: brown; 
    height:100%;
    text-align:left;
}
.logo {
    height:20%;
    background-color: orange;    
}
.login {
    height:80%;
    background-color: yellow;    
}
@media only screen and (max-width: 600px) {
    .menu-top-center {width: calc(100% - 150px);}
}

As you can see in this FIDDLE in progress, everything makes sense, and is responsive just adding a single line of media queries .The social panel won’t change it’s width so at 600px (you may set your desire break width) width, I have changed the menú-top-center to get all the parent width but the social container. Notice, please I also made de main container to be of a máximum width of 970px (as in your example)

Also, I have set some heights just to be able to check the layout, later on I will delete many properties as the content will set the right height.

Now it’s time to put the elements inside their html containers.

Icons to the left of your login adding the images at the html and as css. Right atm they are on a container responsive so the images inside will change their width as you resize window. If you want a fixed size then give to the container a width on px and to the container-logina width with, again width:calc(100% - yourwidthpx); :

.icons-left img {
    width:100%;
    display:block;
    padding:5px;
}

Your “logo” image in the html with your desired size (removing now the height of his parent):

.logo img {
    height:40px;
    width:253px;
    max-width:90%;
    display:inline-block;
}

Your login inputsinside login div (removing now the height of his parent) and the mediaquery to make it resposnive:

.login input, .login button {
    display:inline-block;
}
.login input {width:35%;}
@media only screen and (max-width: 600px) {
    .login input {width:100%;}
}

Your social icons (I recomend you to insert them as a list in the html):

.social {}
.social ul {list-style:none;margin:0;}
.social li {
    height:30px;
    width:30px;
    float:right;
    background-color: blue;
    margin-left:4px; 
    margin-top:4px;
    background-repeat:no-repeat;
    background-size:cover;
}
.social1 {background-image: url(http://the-route-to-your-image.com);}
.social2 {background-image: url(http://the-route-to-your-image.com);}
.social3 {background-image: url(http://the-route-to-your-image.com);}

Your Links:

.links {
    clear:both;
    text-align:left;
    margin-top:4px;
}
.links a {
    display:inline-block;    
}

Then remove heights and background-colors and that’s it: FIDDLE

Of course there are still stuff to do to style your project, after all this is the layout, I will leave some work for You 🙂

If I have time later tonight I may complete your menu trying to explain how to make it resposive with a “burger” icon.

Trust me, All this is MUCH easier and faster tan overriding and modifying your bootstrap to make it look as you want.

Edited (“burger” menú):

Now let’s make the main menú (base on your image). The html is easy:

<div class="container-menu-bot">
        <div class="menu-bot">            
            <ul id="">
                <li><a href="#">Item1</a></li>
                <li><a href="#">Item2</a></li>
                <li><a href="#">Item3</a></li>
                <li><a href="#">Item4</a></li>
                <li><a href="#">Item5</a></li>
                <li><a href="#">Item6</a></li>
                <li><a href="#">Item7</a></li>
                <li><a href="#">Item8</a></li>
            </ul>
            <div class="burger"></div>
        </div>
</div>

Where burger is the icon. We give position:absolute to this container and we hide it using display:none. Then with mediaqueries we show the icon while hidden our list. We also need to change the li’s from display:inline-block to display:block and finally set a min-height to the main container so while the list is hidden you still have the “green” menú nav:

.menu-bot {position:relative;}
.menu-bot a {color:#fff;}
.menu-bot ul {list-style:none; margin:0;}
.menu-bot li {
    display:inline-block;
    padding:10px 20px;
    border-left:1px solid #fff;
}
.menu-bot li:last-child {
    border-right:1px solid #fff;
}
.burger {
    width:25px;
    height:25px;
    background-color: red;
    position:absolute;
    top:7px;
    right:7px;
    display:none;
}
@media only screen and (max-width: 720px) {
    .burger {display:block;}
    .menu-bot ul {display:none;}
    .menu-bot li {display:block; border:0;}
}

We also add our last class:

.menu-bot .visible {display:block;}

visiblewill just change the display of your list once you click on the burger icon. For that you just need a very simple jquery code:

$(document).ready(function () {
            $('.burger').click(function () {
                $('.menu-bot ul').toggleClass("visible"); 
            });
        });

This could be made with just css and using hover insteed of click, but I find it much better the click event and you future users probably will have a better experience
And that’s it. Quite simple, easy to understand and just a few lines of css.

Final FIDDLE. Good luck with your project