1. 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

Discussion in 'Styling and Customization Questions' started by RoyalRumble, Jan 13, 2014.

  1. RoyalRumble

    RoyalRumble Active Member

    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;

    [​IMG]

    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;

    [​IMG]

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

    Russ Well-Known Member

  3. RoyalRumble

    RoyalRumble Active Member

    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
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    You add that to EXTRA.css also.
     
  5. RoyalRumble

    RoyalRumble Active Member

    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;

    [​IMG]

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

    [​IMG]

    To this;

    [​IMG]

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

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

    Brogan XenForo Moderator Staff Member

  7. RoyalRumble

    RoyalRumble Active Member

    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.

     

Share This Page