• 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)

Mr Lucky

Well-known member
#1
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?
 

Brogan

XenForo moderator
Staff member
#2
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

Well-known member
#3
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?