XF 2.0 Place a Logo/Banner on Mobile View

[Laron]

For small screen/mobile users, I want a image to appear with the smaller version of the banner that is displayed on desktop mode, and this version is completely different as I have designed it just for mobile devices, as per Xenforo 1.5x. (I just updated to 2.x)

So I don't want to place it within the navigation bar at the top, which can be specified under Appearance-Styles-xenForo Style-Style properties-Basic options: 2x logo URL field.

I want it to sit above the name of the board and under the nav bar at the top, and take up the full width of the screen.

I want this logo to only appear for mobile devices, not for larger, like tablets, as the image I have now for desktop seems to scale down fine for other resolutions.

I have placed in a 1px x 1px transparent image under the 2x logo URL field, as I don't want anything there.

I'm using the stock xenforo theme. (xenForo Style — I'm been unable to find a theme I like to replace the one I had before (which was never updated to 2.0), so just went with the XenForo Style)

Thanks in advance for any help.

 

[Laron]

(I would be fine with having it above the navigation bar as well)

 

[Laron]

Can anyone help me with this?

A lot of my members are complaining because I have no logo at the top of mobile view. Over half of the members use mobiles to access the forum.

 

[Cannabis Ape]

I would like to know this too.

 

[Ozzy47]

The easiest thing is probably to just change the page_container template to use a different SRC value for the smalllogo, in XF 2.0.2 it should be line 140 of page_container template.

See this guide, https://aliensoup.com/resources/swap-logo-for-text-on-small-mobile-devices.16/

 

[Mr Lucky]

Try this in extra.less

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

 

[Laron]

See this guide, https://aliensoup.com/resources/swap-logo-for-text-on-small-mobile-devices.16/

I read that guide before I posted this thread and I have tried different sized small logos but they all appear small and don't fill up the width of the screen so I am left with the same problem. As a workaround I have no logo and just some text, but this is not what I want. I have spent a lot of time on this and haven't found a solution.

Try this in extra.less

So this is getting much closer to what I am looking for.

The first implementation of that code resulted in the logo appearing very small in the header. I removed "max-width: 100px;" from app_header.less and that made it a bit larger, but it's not reaching it's actual size. I'm looking into what is constraining the height or width so that I can have it fill the entire screen on mobile devices. It's currently about perhaps 50 or 60% of the width of the screen.

 

[Cannabis Ape]

Try this in extra.less

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

Once again I read something off you that helped me out immensely. Did what I needed but like Laron need the logo a little bigger.

I read that guide before I posted this thread and I have tried different sized small logos but they all appear small and don't fill up the width of the screen so I am left with the same problem. As a workaround I have no logo and just some text, but this is not what I want. I have spent a lot of time on this and haven't found a solution.


So this is getting much closer to what I am looking for.

The first implementation of that code resulted in the logo appearing very small in the header. I removed "max-width: 100px;" from app_header.less and that made it a bit larger, but it's not reaching it's actual size. I'm looking into what is constraining the height or width so that I can have it fill the entire screen on mobile devices. It's currently about perhaps 50 or 60% of the width of the screen.

Which line did you delete? Line 79 under

@media (max-width: @xf-responsiveNarrow)

?

 

[Laron]

Which line did you delete? Line 79 under

79, which read "max-width: 100px;"

 

[Mr Lucky]

I

The first implementation of that code resulted in the logo appearing very small in the header. I removed "max-width: 100px;" from app_header.less and that made it a bit larger, but it's not reaching it's actual size.

Put the .p-header-logo iIn extra.less (maybe need !important ?

@media (max-width: 650px) {

    .p-nav-smallLogo img {

        display: none;
    }
    .p-header {

        display: block !important;} 

  .p-header-logo

   {max-width:100% !important}

}

 

[Laron]

I have resolved this issue below.

The actual size of my logo was not large enough in width to accomodate the width of the mobile device. So I had a width of 368 and I increased the image size to 649 (uploaded it with a new filename and changed the filename under Basic Options, 2x logo URL field) and that fixed the issue.

However, I would like to the image to fit perfectly against the top of the nav bar, as there is a gap(5 pxl maybe? I'm guessing?) as well as the top of the screen under the mod/admin bar, but I assume this is related to spacing options which is global (padding, border size, etc) so if I change the global setting that will impact other areas on the forum.

Is there a way to set 0 padding and border for the image in the header? (and/or any other setting that may be causing that gap)

The first implementation of that code resulted in the logo appearing very small in the header. I removed "max-width: 100px;" from app_header.less and that made it a bit larger, but it's not reaching it's actual size. I'm looking into what is constraining the height or width so that I can have it fill the entire screen on mobile devices. It's currently about perhaps 50 or 60% of the width of the screen.

 

[Mr Lucky]

Is there a way to set 0 padding and border for the image in the header? (and/or any other setting that may be causing that gap)

.p-header-inner {

padding: 0px;}

 

[Cannabis Ape]

Put the .p-header-logo iIn extra.less (maybe need !important ?

@media (max-width: 650px) {

    .p-nav-smallLogo img {

        display: none;
    }
    .p-header {

        display: block !important;}

 .p-header-logo

   {max-width:100% !important}

}

That placed the logo back in the nav bar

79, which read "max-width: 100px;"

That made no difference for me.

I have resolved this issue below.

The actual size of my logo was not large enough in width to accomodate the width of the mobile device. So I had a width of 368 and I increased the image size to 649 (uploaded it with a new filename and changed the filename under Basic Options, 2x logo URL field) and that fixed the issue.

However, I would like to the image to fit perfectly against the top of the nav bar, as there is a gap(5 pxl maybe? I'm guessing?) as well as the top of the screen under the mod/admin bar, but I assume this is related to spacing options which is global (padding, border size, etc) so if I change the global setting that will impact other areas on the forum.

Is there a way to set 0 padding and border for the image in the header? (and/or any other setting that may be causing that gap)

My original logo is 350x97 so I will try your solution.

 

[Laron]

My original logo is 350x97 so I will try your solution.

Check out the "ViewPoint" column heading for mobile devices here, http://mediag.com/news/popular-screen-resolutions-designing-for-all/.

It took me a while to find this, as so many specs don't include "viewpoint".

So I have set my image to a max width of 853pxl's to cater to the largest resolution for a mobile like device and re-done my logo.

.p-header-inner { padding: 0px;}

This resolved the left and right edges, but the top and bottom still have a gap. I will experiment with some other fields using this class.

 

[Mr Lucky]

This resolved the left and right edges, but the top and bottom still have a gap. I will experiment with some other fields using this class.

.p-header {

        display: block !important;
        padding 0px !important;

    }

 

[Laron]

.p-header-inner { padding: 0px;}

So I can't work out how to remove this gap that sits below and above the logo. It's possibly around 3-10 pixels.

So just to clarify, the logo on the mobile device now sits in the header above the navigation menu and below the admin/mod bar.

.p-header { display: block !important; padding 0px !important; }

I just tried this and the logo suddenly appeared in the old position on the left side of the nav bar no longer in that header area. (note that the width of the logo is above 650px)

 

[Cannabis Ape]

Check out the "ViewPoint" column heading for mobile devices here, http://mediag.com/news/popular-screen-resolutions-designing-for-all/.

It took me a while to find this, as so many specs don't include "viewpoint".

So I have set my image to a max width of 853pxl's to cater to the largest resolution for a mobile like device and re-done my logo.


This resolved the left and right edges, but the top and bottom still have a gap. I will experiment with some other fields using this class.

I added the bigger logo to the 2x logo url but the size remains the same for me

 

[Laron]

I added the bigger logo to the 2x logo url but the size remains the same for me

Here is my extra.less

/* center logo */
.p-header-logo
{
    margin-left: auto;
}
@media (max-width: 650px) {
    .p-nav-smallLogo img {
        display: none;
    }
    .p-header-inner {
        padding: 0px;
    }
    .p-header {
        display: block!important;           
    }
}

(i just have that small gap at the top and bottom now, but I'm just about there)

With the removal of that width constraint I mentioned earlier, and increasing the width in resolution of my image to 856, I don't think I have made any other changes to get this working.

Make sure you give the logo a new file name so you know it's not a cache issue too.

 

[Cannabis Ape]

Here is my extra.less

/* center logo */
.p-header-logo
{
    margin-left: auto;
}
@media (max-width: 650px) {
    .p-nav-smallLogo img {
        display: none;
    }
    .p-header-inner {
        padding: 0px;
    }
    .p-header {
        display: block!important;       
    }
}

(i just have that small gap at the top and bottom now, but I'm just about there)

With the removal of that width constraint I mentioned earlier, and increasing the width in resolution of my image to 856, I don't think I have made any other changes to get this working.

Make sure you give the logo a new file name so you know it's not a cache issue too.

Aight, forgot to delete line 79 again in app_header.less. looks great now, I only had to set it back to the left on desktop as it's centered now .

On to the next things

 

[Mr Lucky]

One thing I found with the above is that although there is now a header with logo on mobile view, the logo is lost on the stick eve when scrolling down.

With the following addition, you get the best of both worlds. Logo in header at top of page, and added to sticky only after scrolling:

(NB: In Header & Navigation style properties Sticky navigation element =Primary and sub-navigation rows)

@media (max-width: 650px) {
    .p-nav-smallLogo img {
        display: none;
    }
 
   .p-navSticky.p-navSticky--all.is-sticky .p-nav-smallLogo img
    {display: initial}
   
    .p-header {
        display: block !important;
        padding:10px 0px !important;
    }
    .p-header-logo
    {max-width:80%}
}

If it doesn't work try adding !important to display:initial and/or display:none