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

XF 1.3 No logo for responsive (or different logo)

Discussion in 'Styling and Customization Questions' started by Mr Lucky, May 29, 2014.

  1. Mr Lucky

    Mr Lucky Well-Known Member

    1) I want to have no logo when responsive less than 400px width.

    This works:

    Code:
    @media only screen and (max-device-width:400px)
    {#logo
    {display:none}
    But the header height is not reduced.

    I try either of these

    Code:
    @media only screen and (max-device-width:400px)
    {#logoBlock
    {height:30px !important}
    }
    Code:
    @media only screen and (max-device-width:400px) 
    {#header
    {height:30px !important}
    }
    But still the header height is not reduced.

    2)

    How do I have a different logo for responsive?

    Can anyone help please?
     
  2. Brogan

    Brogan XenForo Moderator Staff Member

    If you want to remove it, add this to EXTRA.css:
    Code:
    <xen:if is="@enableResponsive">
        @media (max-width:@maxResponsiveNarrowWidth) {
            #logo {
            display: none;
            }
    
            #headerMover #headerProxy {
            height: {xen:calc '@headerTabHeight * 2 + 2'}px; /* +2 borders */
            }
        }
    </xen:if>
    The logo will automatically shrink to fit the available space, so if you want to keep it but adjust the height of the header, don't add the first block of code for #logo, just recalculate the height.
    You can do that for various widths.
     
    Mr Lucky likes this.
  3. Mr Lucky

    Mr Lucky Well-Known Member

    That's great thanks for no logo.

    But what if I want a different logo as opposed to shrinking the current one?

    The current logo is 300px x 180px (and a Header logo height in style properties defined as 220px to give it 20px margin above and below)

    But I want to switch to a logo that is e.g. 300px x 40px for mobiles?
     
  4. Brogan

    Brogan XenForo Moderator Staff Member

    51463 likes this.
  5. Mr Lucky

    Mr Lucky Well-Known Member


    Yes, that appears to do what i want! Thanks

    Although I'd still like to know if there is something I can just put in extra.css to define a different logo image (I prefer not to keep piling on the addons)
     

Share This Page