I would like to minimise header and hide logo when scrolling
Hey davidnorrie,
Could you post a link to the site in question so that we can take a closer look please? If you have a mockup or screenshot highlighting the changes you would like to make it would help as well.
Best regards,
Rikard
I have almost got it to work see http://www.alpha1builders.co.nz/
This is the CSS added
.header-scrolled .logo img, .header-scrolled .logo, .header-scrolled .phone-info, .header-scrolled .header_bg
{
display: none !important;
height: 0px !important;
line-height: 0px !important;
max-height: 0px !important;
}
.header-scrolled .container_wrap
{
position: relative;
top: -60px;
}
.header-scrolled .av-main-nav-wrap
{
position: relative;
top: 0px;
}
The only problem now seems to be the lower white menu border?
Regards
Dave
Hi Rikard
I have updated the CSS on http://www.alpha1builders.co.nz/ as below and it seems to work well, can you please check the code is OK?
.header-scrolled .logo img, .header-scrolled .logo, .header-scrolled .phone-info, .header-scrolled .header_bg
{
display: none !important;
}
.header-scrolled .container_wrap
{
position: relative;
top: -61px;
}
.header-scrolled .av-main-nav-wrap
{
position: relative;
top: 0px;
}
.header-scrolled .container_wrap_logo
{
border-style: none !important;
border-width: 0px !important;
}
Thanks
Regards
David Norrie
Hi,
I think your code is good and working fine, I think it just needs enhancement when scrolling down, the transition isn’t smooth, you can use some css transitions ( http://www.w3schools.com/css/css3_transitions.asp ) then maybe not use display: none, instead you can use height:0, opacity:0, visibility:hidden, try to tweak it a bit and it should be better :)
Best regards,
Nikko