XF 2.1 Logo and Responsive

[Sonnie]

So we are trying to get our logo on responsive views (iphone/android) to fill the screen, but I'm having a hard time accomplishing it. As we narrow the screen, the logo moves to the p-nav bar and is tiny.

Things I've tried...

1. Set the 2x logo URL with a larger 550px wide logo, but it doesn't seem to do anything at all to help.
2. Used the following code in Extra.less (from another thread) and it gets us close, but still puts the logo in the p-nav bar at some widths... yet the logo still does not fill the screen when it eventually moves above the p-nav bar.

@media (max-width: 550px) {
    .p-nav-smallLogo img {
        display: none;
    }
    .p-header {
        display: block !important;}
    .p-header-logo
   {max-width:100% !important}
}

3. Changed the max-width of the p-header-logo in app_header.less from 100px to 550px, which does not seem to have done anything either.

Can someone help us with the code... and tell us what the purpose of the 2x logo URL is suppose to be... and how to make it work?

Thanks!

 

[Ozzy47]

This is what I have and it works well:

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