XF 2.1 Newbie question on changing logo for mobile display

[rockymountainmotos]

My first post... hello all. I look forward to learning and contributing here!

My logo looks great on desktop, but is shrunken down and unreadable on mobile.

I researched and learned that I can modify the PAGE_CONTAINER file, specifically the <div class="p-nav-smallLogo"> line to insert an image suitable for mobile display.

1) Are there any guidelines on what this image size should be?

2) I changed the line to read as follows, but nothing has changed when I browse my site on mobile.

<img src="/images/headermobile.jpg"

Can someone please tell me what I'm doing wrong?

Ideally, I would like the image to appear at the very top of the page in mobile display, like here: advrider.com/f/

Thank you

 

[Russ]

You can make it so the normal logo block always shows (even in mobile), and the logo is removed from the nav bar in the logo. Add this to your extra.less:
https://xenforo.com/community/threa...aced-in-header-on-mobile.154081/#post-1284122

Hope that helps... let me know if not

 

[rockymountainmotos]

You can make it so the normal logo block always shows (even in mobile), and the logo is removed from the nav bar in the logo. Add this to your extra.less:
https://xenforo.com/community/threa...aced-in-header-on-mobile.154081/#post-1284122

Hope that helps... let me know if not

Thank you, Russ. I added that code to the bottom of extra.less and now my logo is appearing at the very top of the page on both mobile and desktop, which is great.

On mobile, however, it is very small (iPhone XS). Is this because I need to upload a retina image of much larger size or is their a way for me to control the X,Y dimensions? Right now, the image is 632 pixels wide. Thanks.

 

[Russ]

You can set a 2x logo in the default XF options: Style properties -> Basic options -> 2x logo

 

[rockymountainmotos]

You can set a 2x logo in the default XF options: Style properties -> Basic options -> 2x logo

Thanks, yes I added a 1500 px wide image there, however my logo is still tiny on all mobile devices.

 

[Russ]

Thanks, yes I added a 1500 px wide image there, however my logo is still tiny on all mobile devices.

XF does have a max-width on the logo in mobile which might be making it small you for. Try adding this to extra.less:

.p-header .p-header-logo {
    max-width: 200px;
}

 

[Ozzy47]

This is what I have and I think you will like it.

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

 

[rockymountainmotos]

This is what I have and I think you will like it.

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

Ozzy, your suggestion solved all my issues! Thanks!!!

 

[Ozzy47]

Ozzy, your suggestion solved all my issues! Thanks!!!

Glad that worked for you.

 

[JackieChun]

This is what I have and I think you will like it.

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

This is awesome! Thank you @ozzy47.

 

[Mikethemix]

This is what I have and I think you will like it.

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

That looks pretty similar to what I need. Here are some basic newbie questions on how to implement this:
1. Our main site logo is wide (it is ,logo and our name etc). However for our mobile site we want to display only the logo.
2. Can I upload a main logo and a mobile site logo - will the above script handle this? Or is there already an option for this?
3. Where should I place the above script?

Many thanks,
Mike

 

[trapped_soul]

This is what I have and I think you will like it.

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

Thank you my friend, this worked a peach.

 

[gkg2k]

This is what I have and I think you will like it.

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

Here, too. Solved!

Thanks.

Gianluca

 

[hIBEES]

How do you exclude banners, I use andys banner addon.