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

XF 1.2 Responsive design, header logo and another banner

Discussion in 'Styling and Customization Questions' started by Marcel, Oct 21, 2013.

  1. Marcel

    Marcel Active Member

    We're running a plugin to display banners opposite the header logo.
    I've enabled responsive design and on it's own, works brilliant on all my devices.

    Our header logo, (400x68), is left aligned at the top of the forum regardless of page. If the browser shrinks, the logo is resized accordingly.

    Now the banners we're showing (roughly 400x68 too), I've added to display after the header_logo hook, in a simple div, with a float:right to right align it.

    Works fine on a full size browser, as displayed below. I've used the default theme but the behaviour is the same.
    responsive01.jpg
    Yet when I resize horizontally, the banner ad sticks to the right, then when it meets our logo, drops below it (this is fine), the navbar drops too (which is also fine), but the page content does not. Which means it looks pretty unsightly.

    responsive02.jpg

    I'm baffled now. Ive done most other things, but I'm struggling to get my head round what should be something simple.

    Also, the site header logo is scaled nicely according to the browser.
    How can I display the banner ad on the right, opposite the header logo, then when the browser is resized, have the navbar act correctly too. (Well, the navbar is acting correctly, it's the rest of the page that isn't, is that right?)
    I'd also like the banner ad to resize too when the browser is shrunk even further below the 400px wide mark.

    Thanks in advance.
     
    wickedstangs and Bram like this.
  2. Marcel

    Marcel Active Member

    Or actually, I'd prefer it if the banner ad didn't drop at all (maybe at a very minimal width), instead *both* banners (header logo and ad) were treated as equally important and started resizing at roughly browser width * 2.
     
  3. Brogan

    Brogan XenForo Moderator Staff Member

  4. Marcel

    Marcel Active Member

    Cheers Brogan. I've already been through those, and I think I understand the jist of it all. I've included responsive AdSense already (Sadly based on refreshes, not 'live', but still.....)

    This just has my head pickled. I need coffee.
    The float:right I'm using is partially key, as removing that does stop the navbar dropping of course, but the banner ad is obviously not right-aligned, which I require.
     
  5. Brogan

    Brogan XenForo Moderator Staff Member

    The banner is too wide at narrower widths.

    You need to use a smaller banner.
     
  6. Russ

    Russ Well-Known Member

    Another option you can look into is expanding the headerproxy depending on the resolution:

    Code:
    <xen:if is="@enableResponsive">
    
       @media (max-width:@maxResponsiveWideWidth)
       {
         #headerMover #headerProxy { height: 300px; }
       }
    </xen:if>
    
    Should note you'll still need responsive ads*
     
    Last edited: Oct 22, 2013
  7. Marcel

    Marcel Active Member

    Cheers Brogan. I know the banner is too wide. The problem is, when the page reduces width, I'd like to reduce them both equally, just like Xen reduces (scales) the header logo. I assume it's a CSS + code issue but I've no idea what.

    Thanks Russ, I'll see if that makes it a bit prettier.
     
  8. Marcel

    Marcel Active Member

    Forgot to say, the banner ad I want to shrink / place opposite the header logo isn't adsense. This is a 468x60(ish) plain image file.
     
    wickedstangs likes this.
  9. Brogan

    Brogan XenForo Moderator Staff Member

    In that case just use max-width:100% and it will resize automatically as the container size reduces.
     
  10. Marcel

    Marcel Active Member

    Thanks.
    Well, I've tried every single combination of CSS I can think of, and I still can't get it to play nice.
    Every time the browser is shrunk, the banner ad on the right drops below and then if you keep shrinking it pushes off the edge of the left of the page.
    It won't scale at all. Although the header logo still scales and behaves nicely.

    The closest I could get to some almost-acceptable behaviour was using Russ' code above (minus the if conditional), in extra.css.

    On my iphone in portrait, this basically dropped the banner ad below the header, it also dropped the navbar a nice amount (I used 190px IIRC).
    Unfortunately the banner ad was still a little too wide (I still need it to scale).

    If I was confused before, I'm even more confused now.
    I think it's to do with the plugin I'm using (Merc's Ad Manager, Test Build 28). That pulls the banner into the headerMover via a hook.
    I think that this ends up that both banners are in different elements and thus one scales and the other doesn't)
     
  11. Marcel

    Marcel Active Member

    Actually come to think of it, I'd be happy to just remove the banner ad on all small mobile devices in portrait mode for now.

    The plugin allows me to specify css to add to the banner ads, and I have it set to simply float: right;
    The template that displays the banner is :

    <div class="{$banner.css_class}" style="{$banner.css_style}"><a href="{xen:link end, $banner}" target="_blank"><img src="{$banner.imageUrl}" /></a></div>

    How would I override this to remove the display of this div (or image) using the responsive design section of the style?
     
  12. Brogan

    Brogan XenForo Moderator Staff Member

    Use a media query based on the browser width and display:none.

    It's all explained in the resources.
     
  13. Phases

    Phases Active Member

    Found this thread when I had the same problem. Installed the mentioned add-on and it helped some, with resizing logo and stuff :) However I was still getting the navbar pushing over the breadcrumbs.

    Took a while to figure out. I know it's stated that it's all explained in the resources, but I had wished it were more spelled out. Here is what I did, for future folks. Seems to work well.

    In breadcrumb template just about <nav>:

    <style>
    .minfix { height: 40px; }
    @media(min-width: 575px) { .minfix { height: 0px; } }
    </style>
    <div class="minfix"></div>

    Thanks! :)
     
    Last edited: Nov 22, 2013
    wickedstangs and Bram like this.
  14. Bram

    Bram Well-Known Member

    @Phases where do I put this code exactly. I've placed it around the <nav> parts but without success.
     
  15. Phases

    Phases Active Member

    I put it just above the nav tag, so the top of my breadcrumb template looks like so:

    Code:
    <xen:edithint template="breadcrumb.css" />
    
    <style type="text/css">
    .minfix { height: 40px; }
    @media(min-width: 670px) { .minfix { height: 0px; } }
    </style>
    <div class="minfix"></div>
    
    <nav>
    It may not be one size fits all, mine was pretty precise to whatever I was doin' at the time with other elements. Try setting the min to like 140 instead of 40 and see if it drops stuff down, if so you're good, just adjust as needed.
     
    Bram likes this.
  16. Bram

    Bram Well-Known Member

    Will give it a final try (Xenforo's header is shortening my life with at least 10 years :D). Thanks for trying to help me out (y)
     
    Phases likes this.
  17. NeilTolbert

    NeilTolbert Member

    Did this work for you? Having the exact same struggle.
     
  18. Mr Lucky

    Mr Lucky Well-Known Member

    I had a headache with two logos in the header. In the end my best solution was to remove the second logo for mobiles (medium responsive) using img class

    Code:
    @media only screen and (max-device-width:610px)
    {.headerlogo2
    {display:none !important}
    }
    And have it appear below that size under the navbar (ad_above_top_breadcrumb template)

    Code:
    .mobilelink
    
    .mobilelogo2
    
    {display:none}
    
    @media only screen and (max-device-width:610px)
    {.mobilelogo2
    {display:initial;max-width:100%;height:auto;}
    }
    
    This looks better than having them both in the header on mobiles one above the other IMO as well as avoiding the issue with the navbar
     

Share This Page