XF 2.1 Mobile logo

[upnet]

Our logo in the header isn't looking too great on mobile in 2.x. Is it possible to change the margins above and below the logo on mobile only? Will that effectively enlarge the mobile logo?

 

[woody]

Alternatively, simply size your logo with additional transparent pixels above and below.

 

[upnet]

Wanting to reduce the margins for mobile. Desktop is good as is. Changing the actual image would make it bad for desktop which only switches the problem.

 

[Arty]

.p-nav-smallLogo {
   margin: 15px 0 15px 0;
}

Order of values in margin: top right bottom left

 

[upnet]

Thanks @Arty! Is there a way to figure out these definitions from the source code or somewhere?

.p-nav-smallLogo

 

[upnet]

I tried

.p-nav-smallLogo {
margin: 2px 0 2px 0;
}

It didn't visually change the space above or below the logo. I tried 15x 0 15x 0 as well and it expanded the space above and below but the logo remained the same size. I'm guessing my idea about margins doesn't change the image display size as I had wrongfully hoped.

 

[Arty]

If you want different size for logo, you need a different logo. In PAGE_CONTAINER template find publicLogoUrl. There are 2 entries: one for normal logo and one for mobile logo. By default both are the same. Change one that is inside div with class p-nav-smallLogo to different logo

 

[sbj]

[SC] Logo Small

Hello, Today I share with you an add-on made by @SyTry to add a Small Logo in responsive view ! Screen (PC) : Screen (responsive) : You can change URL via the properties styles : Installation : Download and unzip it. Copy the...

xenforo.com

You can have 2 seperate logos. 1 for desktop, 1 for mobile.