XF 2.2 Bigger logo on mobile

[interforo]

How can I make logo bigger and on its own line on mobile only?

 

[beerForo]

This is what I did

/* mobile logo large */
.p-nav-smallLogo
{
    display: none !important;
}
.p-header-logo
{
    max-width: none !important;
}
.has-js .p-header
{
    display: block;
}

 

[interforo]

This is what I did

/* mobile logo large */
.p-nav-smallLogo
{
    display: none !important;
}
.p-header-logo
{
    max-width: none !important;
}
.has-js .p-header
{
    display: block;
}

thanks but now my logo disappeared

www.interfans.org/forum

 

[beerForo]

I see it.

 

[interforo]

I see it.

I see this

 

[beerForo]

Maybe clear your cache, but I see it.

 

[Brad Padgett]

@media screen and (max-width: 768px) {

    .p-nav-smallLogo {
        max-width: 200px !important;
        }
    
    .p-nav-smallLogo img {
        max-height: 100px !important;
    }
}

That's what did it for me. Feel free to assume there's a better way but this is what I did and works just fine.

 

[interforo]

Maybe clear your cache, but I see it.

I did but can't see it
can you post a screenshot of what you see please?

 

[beerForo]

 

[interforo]

View attachment 238460

oh that's not the forum!
the link is www.interfans.org/forum

 

[beerForo]

Yes, it disappeared.

 

[interforo]

Yes, it disappeared.

Must be because of the theme I use
Can you help with a customized code for it please?

 

[Ozzy47]

Ask your style developer for the correct code .

 

[Old Nick]

 

[rosal]

@media screen and (max-width: 768px) {

    .p-nav-smallLogo {
        max-width: 200px !important;
        }
   
    .p-nav-smallLogo img {
        max-height: 100px !important;
    }
}

That's what did it for me. Feel free to assume there's a better way but this is what I did and works just fine.

Thanks after many hours trying to fix the mobile logo fixed "height" default, i found your post and fixed my issue.
Xenforo have to check this and implemented by default i think,

Regards

 

[TUG]

having same issue, where did you paste the css code? i guess i figured that "set height and width" setting on the logo options was intended for this but its just SUPER tiny on mobile now.

edit...found this...didnt realize it needed to go in extra.css thanks to the forum for the fix!

XF 2.2 Post in thread 'Logo on mobile'

Oct 5, 2020

Add this to your extra.less template

// ########################### FULL SIZE LOGO ON MOBILE ########################
.p-nav-smallLogo {
    display: none !important;
}
.p-header-logo {
    max-width: none !important;
}
.has-js .p-header {
    display: block;
}

• Ozzy47

•