• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Header Height In Responsive Design

#1
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 :)
 
#3
Thanks for attempting to help @Russ

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

In Extra.CSS

Code:
.Responsive #logo {
    height: auto;
    line-height: normal;
}
In PAGE_CONTAINER before </head>

Code:
<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?

Code:
<xen:if is="@enableResponsive">

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

So I have this in EXTRA.CSS

Code:
<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>

Code:
<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;

Code:
.Responsive #logo {
    height: auto;
    line-height: normal;
}
 
#7
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.