Logo resize on sticky header scroll
Permalink December 03, 2015 at 10:44 AM
I'm designing a site with the Alpha theme, which has a beautiful sticky header that resizes as the user scrolls through. However, the theme was designed for the header to use a main nav block (on the right side) and the site name as text on the left; I want to use an image logo instead.
The problem is that I cannot get the logo to stay on the header and resize. I've tried CSS and JQuery code (from a variety of tutorials and sources) but nothing is working.
Can anyone find something I'm missing?
#ff-header-wrap {
z- index: 2 ;
position: relative;
top: 0 ;
left: 0 ;
width: 100 %;
background- color: #ffffff;
- webkit- transition: height 0. 3s;
- moz- transition: height 0. 3s;
- ms- transition: height 0. 3s;
- o- transition: height 0. 3s;
transition: height 0. 3s;
. logo {
float: left; height: auto;
- webkit- transition: all 0. 3s;
#ff-header-wrap {
z- index: 2 ;
position: relative;
top: 0 ;
left: 0 ;
width: 100 %;
background- color: #ffffff;
- webkit- transition: height 0. 3s;
- moz- transition: height 0. 3s;
- ms- transition: height 0. 3s;
- o- transition: height 0. 3s;
transition: height 0. 3s;
. logo {
float: left; height: auto;
- webkit- transition: all 0. 3s;
- moz- transition: all 0. 3s;
- o- transition: scale( 1 ) ;
- o- transition: all 0. 3s;
transition: all 0. 3s;
- webkit- transform: scale( 1 ) ;
- moz- transform: scale( 1 ) ;
transform: scale( 1 ) ; }
. header- shrink . logo {
- webkit- transition: all 0. 3s;
- moz- transition: all 0. 3s;
- o- transition: all 0. 3s;
- o- transition: scale( 0.6 ) ;
transition: all 0. 3s;
- webkit- transform: scale( 0.6 ) ;
- moz- transform: scale( 0.6 ) ;
transform: scale( 0.6 ) ; }
header {
display: inline- block;
float: right;
}
header {
line- height: 150px;
margin- left: 20px;
color: #ffffff;
font- color: #1e4191;
font- weight: 300 ;
font- size: 14px;
text- transform: uppercase;
- webkit- transition: all 0. 3s;
- moz- transition: all 0. 3s;
- ms- transition: all 0. 3s;
- o- transition: all 0. 3s;
transition: all 0. 3s;
}
header : hover {
font- weight: strong;
}
header . smaller {
height: 75px;
}
header . smaller h1#logo {
height: 65px;
line- height: 75px;
font- size: 30px;
}
header . smaller nav a {
line- height: 75px;
}
@ media all and ( max- width: 660px) {
}
header {
display: block;
float: none;
height: 50px;
text- align: center;
margin: 0 auto;
}
header {
line- height: 50px;
margin: 0 10px;
}
header . smaller {
height: 75px;
}
header . smaller h1#logo {
height: 40px;
line- height: 40px;
font- size: 30px;
}
header . smaller nav {
height: 35px;
}
header . smaller nav a {
line- height: 35px;
}
}
