XF 1.3 No logo for responsive (or different logo)

[Mr Lucky]

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

This works:

@media only screen and (max-device-width:400px)
{#logo
{display:none}

But the header height is not reduced.

I try either of these

@media only screen and (max-device-width:400px)
{#logoBlock
{height:30px !important}
}

@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?

 

[Paul B]

If you want to remove it, add this to EXTRA.css:

<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]

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?

 

[Paul B]

You may be interested in this add-on: http://xenforo.com/community/resources/respollo.2016/

 

[Mr Lucky]

You may be interested in this add-on: http://xenforo.com/community/resources/respollo.2016/

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)