css 这是我对内森萎缩头球的替代方案

Posted 2021-05-13

<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>

jQuery(function( $ ){
 
$(window).scroll(function () {
if ($(document).scrollTop() > 200 ) {
$('.header, .logo').addClass('shrink');
} else {
$('.header, .logo').removeClass('shrink');
}
});
 
});

.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;
}