Header height not resizing

[rlshaw]

I’m using header 6 and the resizing sticky header is not working correctly. The logo correctly resizes but the header does not correspondingly shrink.

[Mohammad – SUPPORT]

Hi,
Please provide me correct admin login detail.
Thanks
Mohammad

[rlshaw]

This reply has been marked as private.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.sticky-header-resized{
height:80px !important;
}

Thanks
Mohammad

[CFi]

This custom CSS is nice and all but it doesn’t ease like the logo resizing does. Any suggestions? Otherwise, as-is it looks a little funny see the header resize before the logo does.

[rlshaw]

I agree 100%. The logo resizing after the header is not elegant. I’d also be interested in a fix.

[Mohammad – SUPPORT]

Hi,
Please attach screenshot after using custom css code:-
Thanks
Mohammad

[rlshaw]

You can observe the problem at vanessashaw.com which has the css code provided.

[Mohammad – SUPPORT]

Hi,
It looks perfect after resizing. Please check the attachment.
Thanks
Mohammad

Attachments:

You must be logged in to view attached files.

[rlshaw]

The problem is not the end result which is correct. The problem as pointed out by the previous poster is the transition effect – please see the comments above.

[Nishant – SUPPORT]

Hello,

Please put this code in your theme options – custom css.

This code will disable the transition effect.

If you ask me, i would recommend to keep the transition because it looks great.

.sticky-header-resized #logo {
    transition: none;
    -webkit-transition: none;
}

.sticky-header-resized #logo img {
    transition: none;
    -webkit-transition: none;
}

[rlshaw]

I think we still are not understanding each other. I want to keep the transition effect. The css you supplied below does shrink the sticky header bar down to the correct size. Without it, the header bar does not resize correctly.

.sticky-header-resized{
height:80px !important;
}

The issue is the transition effect is now a bit strange. The header bar resizes notably before the logo does so the logo overlaps the header bar for a moment until the logo correctly resizes to fit in the header bar. It’s hardly a big deal but if there is an easy fix for that, that’d be nice.

[Nishant – SUPPORT]

Let me check again.

[Swift Ideas – Ed]

Hi there,

You’d need to add this css too:

#header-section.header-6 #header {
  height: 130px;
  transition: all 0.6s ease-in-out;
  -moz-transition: all 0.6s ease-in-out;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
}

Hope that helps.

– Ed

[rlshaw]

Cool. That did the trick. thanks so much, Robert