Header not resizing

[Ken]

Sadly no luck.

The logo still resizes on desktop as before, and the header still does not resize on desktop as before, only now instead of the header being permanently too big, the header is now permanently too small and the logo protrudes from the bottom. No change at all on mobile phone with the addition of the new css – same large space under logo as before.

Current css attempting to redress the problem looks like this

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

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

#header-sticky-wrapper header#header {
height: 80px;
}

I tried alternately removing one and then the other, and then both of the older scripts to see if the new css would work either alone or in a different combination, but no luck there either.

I also did a test where I removed all other css, leaving only the three scripts above just to make sure that there wasn’t an error with something else that was breaking this css, but there was no difference.

Regards,
Ken

[Swift Ideas – Ed]

Hi Ken,

Drop us a login to your site and we’ll check out all the settings for you. Will be much easier.

– Ed

[Ken]

This reply has been marked as private.

[Swift Ideas – Ed]

You had an incorrect space in one of the css declarations – fixed that for you.

– Ed

[Ken]

Hi Ed,

Thanks for that 🙂

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

The space you removed from this code means that desktop version is now functioning perfectly, and we can leave this piece alone now 🙂

You guys also provided this code to try and solve the mobile version ..

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

Unfortunately that is not working.

I’ve attached a screenshot to show what I mean.
The header bar is way to big for the logo. This occurs on my desktop browser (firefox) and also on my mobile browser (chrome) – I’ve included the mobile screen shots.

I also included screenshots from the “drive a tank” website in your showcase section as an example of what the header should be doing.

Is it helpful to note that I’ve had this problem since I very first loaded the theme?

Thanks for your help.

Regards,
Ken

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

This code should sort the mobile version:

@media only screen and (max-width: 479px) {
#header-sticky-wrapper, #header-section .is-sticky #header.sticky-header {
height: 80px !important;
}
}

– Ed

[Ken]

Hi Ed,

Unfortunately the phones still look the same.
To make sure it wasn’t just my Note 3, I took some screens from an S3 and an iPhone last night as well … same issue with the height – see the attachment.

Attachments:

You must be logged in to view attached files.

[Swift Ideas – Ed]

Just checked on iPhone and added some more custom css for you – hopefully we’re there now!

– Ed

[Ken]

Thanks Ed, almost there 🙂

That extra code you added sorts out the phone version.

Because my phone is a Note it’s got a pretty big screen, so when I turn it to landscape I think it goes onto the tablet grid. I don’t have a way to test this. In that landscape mode on my phone the code above no longer seems to apply. On a landscape phone that is especially problematic as it means that the header takes up a third to half of the available screen height.

My intuition tells me it must be because of the max width in this line of code:
@media only screen and (max-width: 479px) {

So I took a look at the bootstrap grids here
http://getbootstrap.com/css/#grid-options

correct me if I’m wrong here … but based on that assumption I changed the max width to:
@media only screen and (max-width: 768px) {

I don’t know if 768px is the right number because I couldn’t see where you got 479px from the bootstrap grid so it was kind of a guess 😀 But that did get the header to resize in phone landscape exactly as your code does in phone portrait. Awesome 🙂

However, there must be a logo resizing class for this tablet/phone landscape layout as well (and I don’t know what that is) because while increasing the max-width in your line of code corrects the header in landscape, it doesn’t affect the logo resizing in that landscape mode meaning the logo remains to big.

If you look at the last screenshot it means that of the 3 screenshots we have solved the left two (ignoring the driveatank.com screens) but the top right remains as it is in that screenshot.

[Swift Ideas – Ed]

All looks fine here! https://www.dropbox.com/s/5m8iwt6zo1otxzy/Screenshot%202014-08-03%2002.49.45.png

Can you clear your device cache and check again?

– Ed

[Ken]

As I mentioned in the previous post, portrait works great, just as in your screenshot above. Fixes don’t apply to landscape.

[Swift Ideas – Ed]

Ahh yeah – apologies, didn’t see you wanted it the same height. Added some code to sort that for you – check now?

– Ed

[Ken]

Thanks Ed, you nailed it 🙂

So my curiosity has got the better of me – what could the reason be that this doesn’t work correctly on my site without all this extra code? If it was a common challenge there would be a lot more support tickets about it, but I only found one other ticket with the same problem …

[Swift Ideas – Ed]

Hi Ken,

I’m not too sure – I picked up this ticket after custom css had already been added, I can only assume it was due to your logo settings, but I can’t be certain!

– Ed