Dynamik Sticky Shrinking Header Tutorial - Beaver Rocket

Dynamik Sticky Shrinking Header Tutorial

[ulplocker id=”QLHO51L1cUXezDfH”]

 

Logo Image

100 x 100 px logo image link

Dynamik Starter Skin & Settings

Dynamik Skin and Settings Link

Hook Boxes

Dynamik Hook Boxes for sticky header by Robert Monroe


JavaScript used. 

jQuery(document).ready(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() > 220) {
$(‘#masthead, #sticky-header-jump-fix’).addClass(‘animated-2 slideInDown-2 shrink’);
}
else{
$(‘#masthead, #sticky-header-jump-fix’).removeClass(‘animated-2 slideInDown-2 shrink’);
}
});
});

 

CSS used.

/* Header Height */

.site-header {
height: 170px !important;
}

/* Title Area */

#masthead .title-area {
padding: 40px 0 0 20px;
}

#masthead.shrink .title-area {
padding:8px 0 0 20px !important;
}

#masthead.shrink {
width: 100%;
margin: 0 auto;
position: fixed;
z-index: 99 !important;
}

#masthead.shrink .site-header {
max-height: 70px;
width: 100% !important;
font-size: 14px !important;
/*background: rgba(0,0,0,0.8) !important;*/
}
/* Site Title Shrink */
#masthead.shrink .site-title {
font-size: 24px !important;
}

.site-header .site-title a {
transition: all 0s ease-in-out 0s;
}

.site-header.shrink .site-title a {
transition: all 0s ease-in-out 0s;
}

/* Site Description */

.site-description {
margin: 0;
padding: 0px 0 0;
color: #FFFFFF;
}

.shrink .site-description {
margin: 0;
padding: 0px 0 0;
font-size: 1.2rem !important;
}

/* Header Image */

.header-image .site-header .wrap .title-area {
margin: 37px 0px 0px 0px;
background-size: 90px !important;
}

/* Sticky Header Image Size Adjust */

.header-image .shrink .site-header .wrap .title-area {
margin: 10px 0 0px 10px;
background-size: 11% !important;
}
/* Right Header Widget Area Padding & Margin */

.site-header .widget-area {
margin-top: 35px !important;
}

#masthead.shrink .widget-area {
margin-top: -15px !important;
}

/* Sticky Header Jump Fix */

#sticky-header-jump-fix {
height: 0px;
transition: all 0s ease-in-out 0s;
}

#sticky-header-jump-fix.shrink {
height: 170px !important;
transition: all 0s ease-in-out 0s;
}

/* Sticky Header Slide Animation Begin */

.animated-2 {
animation-delay: 0s !important;
-webkit-animation-delay: 0s !important;
-webkit-animation-duration: 0.5s !important;
animation-duration: 0.5s !important;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: ease-in-out; /* Chrome, Safari, Opera */
animation-timing-function: ease-in-out;
}
@-webkit-keyframes slideInDown-2 {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

@keyframes slideInDown-2 {
from {
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
visibility: visible;
}

to {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}

.slideInDown-2 {
-webkit-animation-name: slideInDown-2;
animation-name: slideInDown-2;
}

/* Sticky Header Slide Animation End */

[/ulplocker]

Privacy Settings
Name Enabled
Technical Cookies
In order to use this website we use the following technically required cookies: wordpress_test_cookie, wordpress_logged_in_, wordpress_sec.
Cookies
We use Cookies to give you a better website experience.
x

We use cookies to give you the best online experience. By agreeing you accept the use of cookies in accordance with our cookie policy.