Pro Header - Mobile

Support
#1

Hey gang,
I have a couple of issues with a site that I need your help with, please.

  1. This is pretty insignificant, but the client is bothered by this. When you click the search icon on IPHONE (perfectly fine on android), the search field zooms in to full screen. IS there a way to make sure it stays the same size on iphones?

2.After activating BREEZE through cloudways, my pro header menu on mobile is acting like desktop, i.e. it opens to the right, off screen. (attachment menumobile.jpg).

  1. The mobile menu on the ipad overlaps, so does the footer, even though in the header builder and footer builder it looks fine. (attachment

  2. When i go into individual product pages, the menu/header are changed to a dark version, and we need it to be consistent as the other pages

PLEASE HELP!
Login info to follow.

#2

Hey gang. I resolved the header / menu issue on mobile (CSS minification), and the changes to the color of the menu (same). Still need help on the zoom on iphone search, and the ipad menu.
Thanks

#3

Hi there,

Thanks for posting in.

Glad it’s okay now. About the zooming, it’s natural behavior of IOS if the font being displayed is smaller than 16px. The solution is changing your input fields font size to 16px or greater, like adding this CSS to your global custom CSS.

@media ( max-width: 767px ) {

input[type="text"], input[type="password"], input[type="email"] {
font-size: 16px !important;
}

}

Thanks!

#4

Thanks! What about the header on the ipad?
The mobile menu on the ipad overlaps, so does the footer, even though in the header builder and footer builder it looks fine. (attachment

#5

Oh, I just tried your css for the zoom issue, and the Box doesn’t zoom anymore, but now the cursor is outside of the search field.

#6

Rad. I found this. Can you please try to implement!

#7

Hey There,

Option #2 is the easiest. Simply add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

/*** Styles added to fix the issue with zoom in on iphone ***/
/* iPhone < 5: */
@media screen and (device-aspect-ratio: 2/3) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}
 
/* iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}
 
/* iPhone 6, iPhone 6s, iPhone 7 portrait/landscape */
@media screen and (device-aspect-ratio: 375/667) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}
 
/* iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus portrait/landscape */
@media screen and (device-aspect-ratio: 9/16) {
    select, textarea, input[type="text"], input[type="password"],
    input[type="datetime"], input[type="datetime-local"],
    input[type="date"], input[type="month"], input[type="time"],
    input[type="week"], input[type="number"], input[type="email"],
    input[type="url"]{ font-size: 16px; }
}

Please let us know how it goes.

#8

You guys are the best. Glad to see the support I remember getting a year ago finally coming back…

#9

Thank you for your kind words. Have a nice day! :slight_smile:

#10

Hey gang. This, unfortunately, didnt work. its still zooming in on the iphone…

#11

Hi there,

Could you try this CSS again? Then let’s head on tablet header

@media ( max-width: 767px ) {

input[type="text"], input[type="password"], input[type="email"] {
font-size: 16px !important;
}

}

I checked your site and the search field is still displaying a 12px font size. Hence, the recent CSS may not take effect due to the device aspect ratio selector. Could you confirm that the first CSS works but there is another tablet header issue? If yes, let’s target the tablet too by just changing to 979px.

@media ( max-width: 979px ) {

input[type="text"], input[type="password"], input[type="email"] {
font-size: 16px !important;
}

}

Thanks!

#12

Hi Rad.
I think I created an issue by putting multiple issues on one ticket. My apologies.

The only unsolved issue right now is the ZOOM effect on IPHONE only, when you tap the search icon. Once the input field comes up, and you tap it to enter search query, the iphone screen zooms in on that field. That is the ONLY header issue left unsolved.

#13

Hello There,

The code provided in the link may no longer work as it is out dated. There was some changes in iOS 10 which deemed the code to no longer a working solution. Please check out these links:



Thank you for your understanding.

#14

Do you have an updated code/solution?

#15

Hi there,

Let’s try this, please add this code to your child theme’s functions.php

function x_head_meta() { ?>

<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title><?php wp_title( '' ); ?></title>
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php   }
  add_action( 'wp_head', 'x_head_meta', 0 );

I just added maximum-scale=1.

Hope this helps.

#16

Hey Rad,
I dont mean to be rude, but do you have anyone that can do it, test it, and let me know if it works? We are 11 days into it, and still no resolution

#17

Hi there,

I went to your website and accessed the Appearance > Editor menu and clicked on the functions.php and added the code which @Rad suggested.

Then I checked the case with my iPhone SE and it seems to be working ok now.

Thank you.

#18

YOU ARE MY HERO! THANKS!!

One more tiny favor, please. the submenu dropdowns get cut off when resizing on desktop. how can i fix it?

#19

Hello there,

Please add this code to X > Launch > Theme Options > Global CSS:

@media only screen and (max-width: 1275px) {
    .ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target:after {
         right: 0 !important;
    }
}
@media only screen and (max-width: 980px) {
    .ubermenu-sub-indicators .ubermenu-has-submenu-drop>.ubermenu-target:after {
         right: 10px !important;
    }
}

Hope it helps.

#20

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.