Mobile menu overlapping in landscape

bobbyd

1. I’m having issues with my menu section overlapping the page header content when viewing mobile in landscape, see attached example.

2. Is there a way to move the image over for the portrait mobile version so the woman’s head isn’t cropped off? See second attachment.

Air

Hello:-)

bobbyd said: I’m having issues with my menu section overlapping the page header content when viewing mobile in landscape, see attached example.

You will have to either increase padding of your content or make use of option Header->Hide content under header while editing page.

2. You will have to tweak it manually with custom CSS. Can you send link to that site? On what element you have this background? Revolution slider, VC row, or our title bar?

With kind regards.

bobbyd

1. thanks i’ll try that option

2. It’s a standard row background image. I did send you log-in the site on a previous PM if you wanted to take a look?

Air

If you would add some unique ID to your row(you have option to do it while editing row) you could use such custom CSS then:

#your_unique_id.vc_parallax .vc_parallax-inner{
background-position: 80% 0;
} 

With kind regards.

bobbyd

great thanks, that ID custom css works!

1. I tried those options and the landscape menu still over laps. Is it possible to add some padding to the mobile landscape version only via CSS as I don’t want to adda extra padding to the tablet and desktop landscape versions?

Air

I have checked your site again, and I think you should try different solution.
You use there full height row with centered text. On your place I would hide column with this text for smaller devices, and instead show some other column(s) with same text but formatted for mobile users. You can do it while editing columns in "Responsive Options" tab.

Doing this with padding alone would be impossible to achieve good results on various resolutions.

With kind regards.