Archived topic
Search Icon Causing Problem on iPhone devices
11 replies · Started by franzescodesign on October 21, 2018
Hi! Is there a way to find what's the problem with the search icon when on mobile? Somehow it overflows the container resulting to left and right scroll. I disabled it for the meantime but once it's enabled, it causes left and right scroll or what they call wiggle motion.
I raised a concern last time and we thought that it's about Elementor but not. Please help. Here are the CSS that I'm using for the navigation:
.btn-nav {
background-image: linear-gradient(yellow, #ffe206);
border-radius: 5px;
/*display: inline-block;*/
padding: 3px;
margin: 10px;
}
.main-navigation {
background-image: linear-gradient(to right,#7AF0E8, #75F5D3, #6EFABF);
padding-top: 10px;
padding-bottom: 10px;
}
.btn-nav:hover {
background: #ffe206;
}
.main-navigation .main-nav ul li a {
line-height: 40px;
}
.navigation-search input[type="search"],
.navigation-search input[type="search"]:active,
.navigation-search input[type="search"]:focus {
color: #000000;
background-color: #ffffff;
Here's the screen share via iPhone 7 when the search icon is enabled: https://www.dropbox.com/s/73sra595ef7lb9h/received_2325177727808094.mp4?dl=0
Please help. Thank you!
Hi there,
Sorry how did you end up finding out that it isn't an Elementor problem?
I thought you tested with a GP only page last time and this wasn't happening?
I just view few of our sites that are using search icon and unable to duplicate it. Checkout:
https://gpsites.co/target/
https://gpsites.co/marketer/
https://gpsites.co/tasty/
Let me know :)
Hi Leo! Yeah, that's what I thought too. I found out that it's not an Elementor issue after disabling all of the templates and after trial and error. I can give a temporary access to the link so you can test it out.?
Can you make a new page without Elementor in it and link me to it?
Here's the link: https://rsz.franzescolastico.com/blog/
If there was horizontal scroll, you could scroll to the right and it would stay there instead of snapping back to the main site.
However, there shouldn't as much give as there is on your site.
What happens if you turn off the sticky navigation?
What about turning off the merged header?
Any changes?
Hi Tom, the wiggle motion only happens in ios device. I checked it on android phones and it's normal. No left and right motion.
Hmm..I haven't tried turning-off the sticky nav or the merged header yet.
I just turned-off the sticky nav and it's on Static now. Can you please check?
Thanks! You can turn it back on now.
What happens if you add this CSS to the site?:
.search-item .screen-reader-text {
margin: 0;
}It's added now..
Can you check to see if the issue is fixed? Be sure to clear your browser cache first.
Hi Tom! Thanks for your help, it's fixed now! :D
Awesome! Thanks for reporting the issue :)
