Header not resizing

[Ken]

My logo resizes correctly when using the Logo Resized Height and Width properties in the Header Options tab, but the header itself doesn’t resize with the logo? So the header stays the same height and the logo reduces in size within that header.

Interestingly, the problem only occurs when using header number 6. Otherwise the header resizes correctly.

It’s the exact same problem as here http://support.swiftideas.net/forums/topic/setting-the-height-of-the-header-when-resized/

If I use the css from the support request above, namely

.sticky-header-resized #logo img {
height: 67px!important;
width: 333px!important;
}

then the header does resize correctly … however … adding that code changes my header from number 6 to number 7. True story 🙂
And header number 7 resizes correctly without the custom css anyway.

Take a look at the link. As I said, only with that header.

[Kyle – SUPPORT]

Hi

Add this to your custom css:

#header-sticky-wrapper.is-sticky, header.sticky-header.sticky-header-resized {
  height: 80px !important;
}

– Kyle

[Ken]

Thanks Kyle,

That works for the desktop version, but not the mobile version.

Any idea what the root of the problem might be. I’m sure if everyone had this problem there would be more support tickets about it, so what might I have done differently to everyone else that’s causing the resize issue?

[Kyle – SUPPORT]

Have you added any custom css?

– Kyle

[Ken]

I’ve added a little from my various support tickets over the last couple months, but not much – here is the sum total ..

#logo a.mobile-menu-show i:after {
content: "MENU";
float: left;
margin-right: 12px;
font-size: 14px;
line-height: 20px;
font-style: normal;
color: #f5f5f5;
}

#top-header .th-left {
  color: #f5f5f5;
}

#logo a.mobile-menu-show {
color: #f5f5f5;
}

.spb_accordion_section.group {
  background-color: #ffffff;
}

.spb_tabs .nav-tabs li a, .spb_tour .nav-tabs li a, .spb_accordion .spb_accordion_section > h3 a {
  background-color: #dd3333;
}

.spb_tabs .nav-tabs li.active a, .spb_tour .nav-tabs li.active a, .spb_accordion .spb_accordion_section > h3.ui-state-active a {
  background-color: #f7f7f7;
}

#header-sticky-wrapper.is-sticky, header.sticky-header.sticky-header-resized {
  height: 50px !important;
}

That’s all that’s been added.

[Kyle – SUPPORT]

It seems fine to me, what is the issue on mobile? Could you take a screenshot?

– Kyle

[Ken]

I’ve attached two screenshots, one on loading and one after scrolling down the page.

On loading the header is at full height (correct) but there is significant space in the header below the logo.

On scrolling, the header doesn’t resize, plus the excess padding remains …

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

Try adding this to your custom css:

@media only screen and (min-width: 480px) { 
#header-sticky-wrapper {
  height: 80px!important;
}
}

– Kyle

[Ken]

Hi Kyle,

That didn’t work unfortunately.

Just to recap so far. We’ve added two scripts
1

#header-sticky-wrapper.is-sticky, header.sticky-header.sticky-header-resized {
  height: 50px !important;
}

That code makes the header which wasn’t resizing on either mobile or desktop resize correctly on desktop. Didn’t fix mobile though.

2

@media only screen and (min-width: 480px) { 
#header-sticky-wrapper {
  height: 80px!important;
}
}

We were trying to alter the static height of the mobile header and make it resize. This code altered the static height of the desktop header, but unfortunately didn’t affect the mobile header either in height or in resizing. I have removed it because the static height of the desktop header is correct without it anyway.

So our challenge remains as per the mobile screenshots above.
Maybe it’s worth noting that previously (before code snippet 1) the desktop logo would resize but not the header (which is fixed by code snippet 1), while on mobile neither the logo nor the header resize.

[Kyle – SUPPORT]

Sorry, should be max height, like this:

@media only screen and (max-width: 480px) { 
#header-sticky-wrapper {
  height: 80px!important;
}
}

– Kyle

[Ken]

nope 🙂 that one didn’t do anything to either the desktop or the mobile version ..

[Kyle – SUPPORT]

I’m afraid that’s the best I can do, there’s not any other CSS I can provide you with that won’t affect both versions

– Kyle

[Ken]

Just to check the origin of the issue, I deleted all the custom css, limited as it was.
Both problems described above persist with the theme stock standard.
That suggests to me a bug on your end?

Since the issue is not caused by any custom css, how do we go about identifying the origin of the problem and begin solving it?

[Kyle – SUPPORT]

Still seems as though you have the custom css?

– Kyle

[Ken]

I added it back once I had determined it had no effect on the problem. I have deleted it once more if you want to take a look.