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

XF 1.3 Creating a responsive logo/header height

Discussion in 'Styling and Customization Questions' started by Scribbler, May 18, 2014.

  1. Scribbler

    Scribbler Member

    I have a background image in place on my forum that covers the header and body background areas (similar to what is achieved with the Header and Background Evolved addon) and scales based on the browser window size. My logo is a part of that background image. To create enough space to show the logo at the top of the forum, I created a completely transparent image in photoshop and added it as the board logo. The only problem is that this creates too much space on smaller screens and mobile devices. For the life of me, I can't figure out how to scale the logo based on the browser dimension. I would like to be able to scale the height of the logo.

    Here is what I used for the background in extra.css, but I haven't been able to make it work for the header:

        display: inline-block;
        width: 100%;
        vertical-align: middle;
        background-size: 100%;
        background-position: top-center;
        background-repeat: no-repeat;
        background-image: url(background.jpg) !important;
    #headerMover #headerProxy, #header, #content
        background-color: transparent !important;
    The Respollo plugin didn't do quite what I needed either. Does anyone have any ideas?
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    If you post your forum URL I can debug the CSS and provide exact instructions.
  3. Scribbler

    Scribbler Member

    The url is http://homeschooljunction.com

  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Hmm. To make this responsive you really need to restructure the layout. I suggest a tile background (wood grain) with a "regular" title image on top which can then be made responsive.

    Or consider something like this:


    By constraining the body size you can precisely fit your background. But this then becomes a fixed-width style, not responsive.
  5. AndyB

    AndyB Well-Known Member

    Another option (this is what I do) is to completely remove the header in responsive mode. That way you can keep your awesome looking header the way it is.
  6. Scribbler

    Scribbler Member

    @AndyB - That sounds like my best option. How would I go about doing that?


Share This Page