Sample Responsive Header

by Kushal Jayswal

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<script src="http://fonts.googleapis.com/css?family=Josefin+Slab"></script>
<header id="header" class="cp4_1 shadow marb">
    <div class="grid-container">
        <div class="row pad clearfix">
            	<h1><a class="brand" href="#"><img src="img/logo.png" alt="logo"></a></h1>

            <section class="quick-contact">
                <p>
                    <tel>+112345678</p>
                <p><a href="mailto:[email protected]">[email protected]</a>

                </p>
            </section>
        </div>
    </div>
    <nav id="navigation" class="cp3_1">
        <div class="grid-container">
            <div class="row">
                <div class="nav-trigger">	<i class="fa fa-bars"></i>

                </div>
                <!-- .nav-trigger -->
                <ul class="nav-main clearfix">
                    <li class="active"><a href="#" title=""><i class="fa fa-home"></i> </a>

                    </li>
                    <li><a href="#" title=""><i class="fa fa-line-chart"></i> Company</a>

                    </li>
                    <li><a href="#" title=""><i class="fa fa-cog"></i> Services</a>

                    </li>
                    <li><a href="#" title=""><i class="fa fa-suitcase"></i> Portfolio</a>

                    </li>
                    <li><a href="#" title=""><i class="fa fa-envelope"></i> Contact Us</a>

                    </li>
                </ul>
                <ul class="nav-social highlight">
                    <li class="facebook"><a href="#"><i class="fa fa-facebook-square"></i></a>

                    </li>
                    <li class="twitter"><a href="#"><i class="fa fa-twitter-square"></i></a>

                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- #navigation -->
</header>
<!-- #header -->

CSS

/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

*{
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	
	letter-spacing: .1em;
	font-family: 'Josefin Slab', serif;
	
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

html {
    font-size: 1em;
    line-height: 1.4;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
========================================================================== */

/* 1 =branding */
.cp1_1{ background: rgba(44,62,80,0.75); }
.cp1_1:hover{ background: rgba(44,62,80,1); }

.cp2_1{ background: rgba(231,76,60,0.75); }
.cp2_1:hover{ background: rgba(231,76,60,1); }

.cp3_1{ background: rgba(236,240,241,0.75); }
.cp3_1:hover{ background: rgba(236,240,241,1); }

.cp4_1{ background: rgba(52,152,219,0.75); }
.cp4_1:hover{ background: rgba(52,152,219,1); }

.cp5_1{ background: rgba(41,128,185,0.75); }
.cp5_1:hover{ background: rgba(41,128,185,1); }

/*************************************************/
.cp5_2{ background: rgba(0,163,136,0.75); }
.cp5_2:hover{ background: rgba(0,163,136,1); }

.cp1_2{ background: rgba(255,97,56,0.75); }
.cp1_2:hover{ background: rgba(255,97,56,1); }

.cp2{ background: rgba(255,255,157,0.75); }
.cp2:hover{ background: rgba(255,255,157,1); }

.cp3_2{ background: rgba(190,235,159,0.75); }
.cp3_2:hover{...

JavaScript

$(function () {
    $(".nav-trigger").click(function () {
        $(this).toggleClass('nav-triggered');
        $("#navigation .row > ul").toggleClass("nav-expanded");
    });
}(jQuery));