XF 1.2 Header Height In Responsive Design

[RoyalRumble]

Hi there,

I'm hoping someone may be able to assist with regards to the entitled. I've spent 14-15 hours trying to resolve with no joy.

To explain.

My Logo requires dimensions of 500x139.

On responsive, the header height is then too high;

I appreciate this is a common problem, and Respollo is advised as the solution but it doesn't work for me (and it looks like a few others), and with the author not posting on here for months, I'm not holding my breath for a response any time soon so need to look for a fix elsewhere.

That I did. I've tried this and this and one or two other proposed solutions but none have achieved what I'm after - which to be clear, is a reduction in height of my header/logo in responsive. The closest to my solution was this fix, which achieved the below, but unfortunately, the overlay arrows would intermittently appear;

The testing forum (prior to hopeful vB switch) is here - any help gratefully received

 

[Russ]

See my post here:

http://xenforo.com/community/thread...er-logo-and-another-banner.61870/#post-656790


With the adjusted logo space in your screenshot with the content showing behind the nav, you just need to adjust the proxy proxy.

You'll need to adjust the value of the headerproxy.

So basically do the same fix you had above, but use my code in my post.

 

[RoyalRumble]

Thanks for attempting to help @Russ

To be clear then. I should follow this instruction, which is;

In Extra.CSS

.Responsive #logo {
    height: auto;
    line-height: normal;
}

In PAGE_CONTAINER before </head>

<script type="text/javascript">
function responsiveHeaderHeight(){
    if ($('html').hasClass('Responsive') && $(window).width() < 1000) // my .pageWidth has max-width: 1000px;
        // set the height of #headerProxy to the responsively calculated #header height
        $('#headerProxy').css({'height':($('#header').height()+'px')});
}

// preloaded logo needed for uncached load on Firefox
if (document.images){
    logoPreload = new Image();
    logoPreload.src = "/path/logo.png";
}

// adjust header height on page load
$(document).ready(function(){
    responsiveHeaderHeight();
});

// adjust header height when browser window is resized
// also applies to mobile/tablet devices when going from portrait to landscape and vice versa
$(window).resize(function(){
    responsiveHeaderHeight();
});
</script>

Where does your code (below) insert?

<xen:if is="@enableResponsive">

   @media (max-width:@maxResponsiveWideWidth)
   {
     #headerMover #headerProxy { height: 300px; }
   }
</xen:if>

Thanks

 

[Paul B]

You add that to EXTRA.css also.

 

[RoyalRumble]

Thanks @Brogan

So I have this in EXTRA.CSS

<xen:if is="@enableResponsive">

   @media (max-width:@maxResponsiveWideWidth)
   {
     #headerMover #headerProxy { height: 300px; }
   }
</xen:if>

.Responsive #logo {
    height: auto;
    line-height: normal;
}

And this in In PAGE_CONTAINER before </head>

<script type="text/javascript">
function responsiveHeaderHeight(){
    if ($('html').hasClass('Responsive') && $(window).width() < 1000) // my .pageWidth has max-width: 1000px;
        // set the height of #headerProxy to the responsively calculated #header height
        $('#headerProxy').css({'height':($('#header').height()+'px')});
}

// preloaded logo needed for uncached load on Firefox
if (document.images){
    logoPreload = new Image();
    logoPreload.src = "/path/logo.png";
}

// adjust header height on page load
$(document).ready(function(){
    responsiveHeaderHeight();
});

// adjust header height when browser window is resized
// also applies to mobile/tablet devices when going from portrait to landscape and vice versa
$(window).resize(function(){
    responsiveHeaderHeight();
});
</script>

But arrows remain on mobile view as so;

... And the search block is put out of place on desktop. From this;

To this;

... Looks as though it's this bit that's causing the search box issue;

.Responsive #logo {
    height: auto;
    line-height: normal;
}

 

[Paul B]

I haven't really looked into this in any detail.

I know there is a resource available which may provide a solution: http://xenforo.com/community/resources/respollo.2016/

 

[RoyalRumble]

Thanks for the link @Brogan

I've already exhausted that option (mentioned in OP - quote below) - the author if that resource hasn't posted in months so not hopeful on support.

I appreciate this is a common problem, and Respollo is advised as the solution but it doesn't work for me (and it looks like a few others), and with the author not posting on here for months, I'm not holding my breath for a response any time soon so need to look for a fix elsewhere.