The Incredible Shrinking Header - CSS

gistfile1.css

/*********************************************
	Incredible Shrinking Header CSS
*********************************************/

/* Sticky Top Module */

.builder-module-1-background-wrapper {
    background: #15384E;
    position: fixed;
    width: 100%;
    z-index: 1;
}

/* Second Module Offset */

.builder-module-2-background-wrapper {
	padding-top: 175px;
}

/* Header Logo */

#text-3 img {
	height: 100px !important;
	width: auto;
}

/* Horizontal Header from Custom Menu Widget */

#nav_menu-2 {
	text-align: right;
}

ul#menu-main-menu li {
    float: left;
    margin-top: 40px;
    padding-left: 20px;
    padding-right: 10px;
    transition: all 0.25s ease-in-out 0s;
}

ul#menu-main-menu li a {
    color: #fff;
    font-size: 1.5em;
    letter-spacing: 1px;
    text-shadow: none;
    text-decoration: none;
}

ul#menu-main-menu li a:hover {
	color: #199AEA;	
}

/* Shrinking Effects */

.shrink #text-3 img {
	height: 50px !important;
	width: auto;
}

.shrink .builder-module-sidebar .widget-background-wrapper {
	margin-bottom: .5em !important;
}

.shrink .builder-module {
	padding-top: .75em !important;
}

.shrink ul#menu-main-menu {
	margin-left: 100px;
}

.shrink ul#menu-main-menu li {
	margin-top: 10px;
}

.shrink ul#menu-main-menu li a {
	font-size: 1em;
}

/* CSS Transitions for Header Items */

#text-3 img,
.shrink #text-3 img
.builder-module-sidebar .widget-background-wrapper,
.builder-module,
.shrink ul#menu-main-menu li a,
.shrink ul#menu-main-menu,
ul#menu-main-menu,
ul#menu-main-menu li a,
ul#menu-main-menu li a:hover {
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	-o-transition: all .15s linear;
	transition: all .15s linear;
}