navigation and logo positioning on tablet & mobile device

[Rui Guerreiro – SUPPORT]

Hi,

The language switcher doesn’t appear in mobile/tablet by default due to lack space and design choice.

Did you already updated to the latest 3.0 version?
Backup everything first just in case something goes wrong.

-Rui

[JennyMiniEmpire]

Ok, so if I need to pick one language for tablet and smartphone it has to be english, now it shows me swedish, how do I adjust that?

And what about the logo size and customized revolution slider size for smartphone and tablet?

Yes I updated to 2.18 as Mohammed said just a few days ago. Just resolved all the issues that came with the update so waiting a while with updating to the next version would be preferable.

[Rui Guerreiro – SUPPORT]

Hi,

Regarding the language selection in mobile, you can use the tob bar menu to display your languages links.

You can add the code below to you custom css option to reduce is size.

@media only screen and (max-width: 479px){
#logo a:first-child {
  max-width: 35%;
}
}

Check in Revolution Slider responsive/mobile settings.

-Rui

[JennyMiniEmpire]

Thanks Rui, I added the css and it changes the size on vertical view on phone, but not on tablet or iphone horizontal view, could you please provide me with some css for that as well? It would also be great to be able to set the padding/spacing above and to the left. now it looks a bit misplaced.

[Mohammad – SUPPORT]

Hi,

Please use this custom css code:-

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

#logo img, #logo img.retina{width:180px !important;height:80px !important;}

}

-Mohammad

[JennyMiniEmpire]

I can´t see that it changed anything on ipad unfortunately, the only thing changed is on iphone view where the logo now looks stretched instead. Any suggestions?..

[David Martin – Support]

Hi,

To stop the logo from looking stretched, you would need to remove the height so the image dimensions are proportional to it’s size.

Ex:

@media only screen and (max-width: 767px) {
	#logo img, 
	#logo img.retina{ width:180px !important; }
}

[JennyMiniEmpire]

hi David, I tried the script you gave me but it doesn´t change the logo size at all, not on any device. And what about the left and top padding, possible to change?

If this is too much to work around I would like it to look exactly as on the neighborhood mobile site which looks great- and in that case I would need to add a modified logo for mobile device, is that possible?

[David Martin – Support]

Hi,

Your logo looks perfect for me on small screen. – Could you add a screenshot?

– Have you cleared your cache, or cache plugins?

Thanks.

[JennyMiniEmpire]

Ok, this is getting frustrating, Each person answering on this topic is giving me a different solution and none of them works. I´ve added a screenshot where you can see the logo is:
1- Too big
2- misplaced- I want it closer to the top and closer to the left

Please se my questions below, I´d be really really grateful if you could help me solve this:
-How do I change the space to left and top?
-Is it possible to add a different logo to only mobile device?
-Can I keep the same logo but make it smaller on tablet?

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hello,

Question 1

Mobile Logo Sizing / Reduced Spacing – Normal and Retina Logo Sizes – Please amend to match your requirements

@media only screen and (max-width: 479px) {
	#logo img {
		width: 150px!important;
		height: auto!important;
		margin: -30px 0 0 -30px!important;
	}
	#logo img.retina {
		width: 150px!important;
		height: auto!important;
		margin: -30px 0 0 -30px!important;
	}
}

Question 2

No, not an out the box option for this. The retina logo version will be served on high resolution screens which includes some mobiles.

Question 3

Tablet Logo Sizing / Reduced Spacing – Normal and Retina Logo Sizes – Please amend to match your requirements

@media only screen and (max-width: 979px) {
	#logo img {
		width: 150px!important;
		height: auto!important;
		margin: -30px 0 0 -30px!important;
	}
	#logo img.retina {
		width: 150px!important;
		height: auto!important;
		margin: -30px 0 0 -30px!important;
	}
}

Thanks,
David.