Created
March 10, 2016 14:29
-
-
Save jillmugge/f63271e79451966234a7 to your computer and use it in GitHub Desktop.
This is my alternative to Nathan's shrinking header
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.header { | |
background-color:rgba(255, 255, 255, 0.7); | |
position: fixed; | |
width: 100%; | |
z-index: 1; | |
} | |
/* Second Module Offset */ | |
.hero-text { | |
padding-top: 200px; | |
} | |
/* Header Logo */ | |
.logo { | |
height: 100px !important; | |
width: auto; | |
margin: 20px 0 10px 30px; | |
float:left; | |
} | |
@media (max-width: 1041px){ | |
.logo{ | |
float:none; | |
display:block; | |
margin:20px auto; | |
} | |
} | |
/* Horizontal Header from Custom Menu Widget */ | |
#menu-main-nav { | |
text-align: right; | |
} | |
ul#menu-main-nav li{ | |
/*float: left; | |
margin-top: 40px; | |
padding-left: 20px; | |
padding-right: 10px;*/ | |
transition: all 0.25s ease-in-out 0s; | |
} | |
ul#menu-main-nav li a { | |
color: #333; | |
font-family:'Prata', serif; | |
font-size: 1em; | |
letter-spacing: 1px; | |
text-shadow: none; | |
text-decoration: none; | |
} | |
ul#menu-main-nav li a:hover { | |
color: #199AEA; | |
} | |
/* Shrinking Effects */ | |
.logo.shrink { | |
height: 75px !important; | |
width: auto; | |
-webkit-transition: all .15s linear; | |
-moz-transition: all .15s linear; | |
-o-transition: all .15s linear; | |
transition: all .15s linear; | |
} | |
.shrink .builder-module-sidebar .widget-background-wrapper { | |
margin-bottom: .5em !important; | |
} | |
.header.shrink{ | |
background-color:rgba(255, 255, 255, 1); | |
box-shadow: 0px 0px 10px #999; | |
} | |
.shrink ul#menu-main-nav { | |
margin-left: 100px; | |
} | |
.shrink ul@menu-main-nav li { | |
margin-top: 10px; | |
} | |
.shrink ul#menu-main-nav li a { | |
font-size: 1em; | |
} | |
/* CSS Transitions for Header Items */ | |
.logo, | |
.logo.shrink, | |
.header, | |
.shrink ul#menu-main-nav li a, | |
.shrink ul#menu-main-nav, | |
ul#menu-main-nav, | |
ul#menu-main-nav li a, | |
ul#menu-main-nav li a:hover, .shrink ul#menu-main-nav li a, | |
.shrink ul#menu-main-nav, | |
ul#menu-main-nav, | |
ul#menu-main-nav li a, | |
ul#menu-main-nav li a:hover { | |
-webkit-transition: all .15s linear; | |
-moz-transition: all .15s linear; | |
-o-transition: all .15s linear; | |
transition: all .2s linear; | |
} | |
.builder-module-navigation{ | |
margin-top: 40px; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function( $ ){ | |
$(window).scroll(function () { | |
if ($(document).scrollTop() > 200 ) { | |
$('.header, .logo').addClass('shrink'); | |
} else { | |
$('.header, .logo').removeClass('shrink'); | |
} | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="hero-image"> | |
<div class="header"> <a href="<?php echo home_url(); ?>" title="Home" alt="Logo"><img class="logo" src="<?php echo home_url(); ?>/wp-content/uploads/Arete-Logo.png" alt="Home" /></a> | |
<?php wp_nav_menu( array( 'menu' => 'top menu', 'menu_class' => 'builder-module-navigation') ); ?> | |
</div> | |
<div class="hero-text"> | |
<h1 class="text-center white shadow" style="clear:both;">Welcome to Arete Homes Colorado</h1> | |
<h2 class="text-center white shadow">Providing exceptional home value for over two decades</h2> | |
[custom-button url="" title="Request Information" class="orange-button-sm-shadow block-center popmake-46" icon="" ] | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment