-
AuthorPosts
-
October 13, 2017 at 7:38 pm #864106
If you click on any icon on any page they don’t take you to the right place on an iPad. It ends up a little below where you want to be.
The Robinson Insight navigation banner/menu banner obscures the heading and first few lines of text so you can’t see the text associated with the report links.How can I fix that?
Thanks,
CarolinOctober 16, 2017 at 5:31 am #864638Hey Carolin,
I have checked your site on the iPad device and all looks work normally.
Best regards,
John TorvikOctober 17, 2017 at 8:56 pm #865448Hi John,
unfortunately it doesn’t look fine for us. My client and I both see that the navigation banner covers the heading on our ipads when you click on any of the icons. Please see the examples below of what a page looks like on our ipads and what it looks like when you click on Executive Programs for example.
No matter which icon you click on all pages the navigation always covers the heading.
https://www.dropbox.com/s/6dw5zdidqtsrmky/anchor-1.png?dl=0
https://www.dropbox.com/s/liu1um93qgmlg67/anchor-2.png?dl=0Thanks,
CarolinOctober 18, 2017 at 11:18 am #865652Hi Carolin,
Here are some threads to consider:
If you need further assistance please let us know.
Best regards,
VictoriaOctober 19, 2017 at 11:44 pm #866517I tried what Mike suggested in the last message (Anchor issue with sticky header on iPad). That didn’t change anything. So I went on the website that he referenced and added the orientation and other pixel ratio. The code is now as below but still no change unfortunately:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)
and (-webkit-min-device-pixel-ratio: 2) { .anchor {
display: block!important;
height: 100px!important;
margin-top: -100px!important;
visibility: hidden;
}}And I’m lost when I read the other thread :S
I’m not a programmer but Graphic Designer so I don’t understand what they are talking about when it comes to js files and where they live.Is there something else I could put into the Quick CSS?
Thanks!
Carolin- This reply was modified 7 years ago by messmeriza.
October 23, 2017 at 3:52 am #867419Hi,
The anchor works fine on Chrome Windows 7. Where are you testing this? Please remove the css modification then add the following filter in the functions.php file to adjust the scroll offset or position.
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1); function avf_header_setting_filter_mod($header) { $header['header_scroll_offset'] = $header['header_scroll_offset'] - 48; return $header; }
Adjust the value “48” as needed.
Related thread: https://kriesi.at/support/topic/pb-of-scroll-with-fix-transparent-menu/#post-861759
Best regards,
IsmaelOctober 23, 2017 at 5:05 am #867433Hi Ismael,
yes I know it’s fine on any device or browser but not on the iPad!
Will your code fix it on the iPad?
Thanks,
CarolinOctober 24, 2017 at 5:06 am #867959Hi,
Yes, it should adjust the scroll position on iPad. We can also modify the filter so that it only affects the said device.
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1); function avf_header_setting_filter_mod($header) { $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); if( $isiPad ) { $header['header_scroll_offset'] = $header['header_scroll_offset'] - 48; } return $header; }
Best regards,
IsmaelOctober 24, 2017 at 5:47 am #867968Hi Ismael,
nothing has changed on the iPad after I put the code into Quick CSS. Can you check for yourself, please.
Is there something in my QUick CSS that overwrites what you gave me?
Thanks,
CarolinOctober 24, 2017 at 7:00 am #868003Hi,
You should add the code in the functions.php file. And please don’t forget to remove the browser history or cache because mobile devices tend to cache the stylesheets and scripts.
Best regards,
IsmaelOctober 26, 2017 at 8:00 pm #869307Hi Ismael,
I have only put the last code you gave me into the functions.php file now. I cleared the browsing data on my ipad in the browser settings. But no change on the ipad. Is there anything in my Quick CSS that could interfere with your code:
.main_color tr {
background: #fff !important; border-color: #fff !important;
}td {
border-width: 0px !important;
}.grid-content {
min-height: 100px;
}.page-id-3274 #av_section_1 .iconbox_icon:hover:before {
color: darkgray;
}.page-id-3689 #av_section_1 .iconbox_icon:hover:before {
color: darkgray;
}.avia-testimonial-meta {
margin-left: 0;
}.iconbox_content_title {
text-transform: none !important;
}.search .date-container, .search .date-container + .text-sep {
display: none !important ;
}.logo img {
height: auto;
width: 300px;
height: 77px;
}.avia-testimonial .avia-testimonial_inner{
font-style: italic;
font-size: 15px;
}.page-id-3777 .avia-builder-el-3 .iconbox_icon:hover:before, .page-id-3777 .avia-builder-el-5 .iconbox_icon:hover:before, .page-id-3777 .avia-builder-el-7 .iconbox_icon:hover:before{
color: darkgray;
}.iconbox_icon:hover:before {
color: darkgray !important;
}#top .iconbox_left_content .iconbox_icon, #top .iconbox_right_content .iconbox_icon, #top .iconbox_top .iconbox_icon, #top .iconbox.av-no-box .iconbox_icon {
width: 70px;
height: 70px;
line-height: 70px;
font-size: 35px;
}.reports-isc .av_textblock_section{
margin:20px 0!important;
}.avia-builder-el-19 {
height: 202px !important;
}@media only screen and (max-width: 767px) {
.responsive #scroll-top-link {
display: block !important;
}
}
body .column-top-margin {
margin-top: 0px!important;
}
@media only screen and (min-width: 768px) and (max-width: 800px) {
.menu-item {
display: none;
}
.av-burger-menu-main.menu-item-avia-special, #menu-item-search {
display: block;
}
}
.av-main-nav > li > a {
padding: 0 8px;
}
@media only screen and (max-width: 1366px) and (min-width: 768px) {
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item {
display: none;
}.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special {
display: block;
}
}
@media only screen and (max-width: 1024px) {
.responsive #top .av-submenu-container {
top: auto !important;
position: relative !important;
height: auto;
min-height: 0;
margin-bottom: -1px;
}
}Thanks,
CarolinOctober 26, 2017 at 11:25 pm #869356I tried to change the number 48 to 100. Nothing changed. I then changed it to -100 and that took the whole website down. Completely wiped it out…. Luckily the hosting firm had a backup from a few minutes prior to when I did that. They told me the functions.php file was causing the site being down. Any other suggestions?
Thanks,
Carolin- This reply was modified 7 years ago by messmeriza.
October 28, 2017 at 4:03 pm #869935Hi,
Are you removing the browser history after every adjustments? Please try to use the “+” symbol instead of “-“.
$header['header_scroll_offset'] = $header['header_scroll_offset'] + 100;
Best regards,
IsmaeNovember 2, 2017 at 10:59 pm #871870Yes, when you gave me the code on October 24 I first tried
$header[‘header_scroll_offset’] = $header[‘header_scroll_offset’] – 48;
then removed the browser history, but nothing changed after that.Then I tried
$header[‘header_scroll_offset’] = $header[‘header_scroll_offset’] – 100;
then removed the browser history, but nothing changed after that.When I tried
$header[‘header_scroll_offset’] = $header[‘header_scroll_offset’] + 100;
the whole website down. I had to call the hosting company to load a backup. I couldn’t even load the login screen for WordPress.
The person I spoke to said that the error log showed that the code above was causing the problem.November 3, 2017 at 5:45 am #871995Hi,
Thank you for the update. Please post the FTP and WP login details in the private field. We would like to test this further. Make sure that the theme version is 4.2.
Best regards,
IsmaelNovember 3, 2017 at 10:19 pm #872320Hi Ismael,
I’m running a Child Theme.
I’m worried that the site will go down again if you use the same code and just change the number… I don’t want to call GoDaddy a second time because the site is down for the same reason.
But if you can copy the site onto your server then please go ahead and test it. Login is in the private content.Thanks,
CarolinNovember 7, 2017 at 3:59 am #873500Hi,
We need the FTP details or the login credentials for the cpanel. We can restore it back to normal even if we make syntax errors as long as we have access to the file server.
Best regards,
IsmaelNovember 16, 2017 at 11:32 pm #877835Hi Ismael,
please see the info in the Private Content.
Please make sure that you have access to the backup files so you restore it back to normal before you are trying to change anything.
When I log into the account I don’t see how to access FTP or the cpanel :(Thanks!
CarolinNovember 18, 2017 at 7:48 am #878379Hi,
I’m sorry but we won’t be able to access the file server with that information. Please kindly ask your hosting provider to give you the FTP login credentials.
Best regards,
IsmaelNovember 24, 2017 at 12:46 am #880984Hi Ismael,
please see the info in the private content.
Thanks,
CarolinNovember 24, 2017 at 6:42 am #881075Hi,
Thank you for the info.
We added the following script in the functions.php file.
// custom script add_action( 'wp_footer', 'ava_custom_script' ); function ava_custom_script() { ?> <script type="text/javascript"> (function($) { function a() { $('.iconbox').on('click', 'a', function(e) { var anchor, loc, cur, hash, tab, parent, pos; anchor = $(this).attr('href'); hash = anchor.substring(anchor.indexOf('#')); tab = $('p[id='+ hash +']'); parent = tab.parent('.av_textblock_section'); pos = parent.offset(); if(hash) $(window).scrollTop( pos.top - 100 ); }); } a(); })(jQuery); </script> <?php }
Best regards,
IsmaelNovember 24, 2017 at 11:47 pm #881424Hi Ismael,
in what ipad version and iPad browser did you test it after putting in the code? On my older ipad it hasn’t changed and still covers the headings when you click on the icons as in my post from October 17, 2017.
Thanks,
CarolinNovember 25, 2017 at 3:10 pm #881633Hi Carolin,
Could you please clear the cache, check again and get back to us. Or try on another device?
Best regards,
VictoriaNovember 28, 2017 at 1:05 am #882436Hi Victoria,
on my iPad I cleared the cache for both Safari and Chrome. I don’t have any other browsers installed. The problem still persists and when you click on an icon it ends up a little below where you want to be. The Robinson Insight navigation banner/menu banner still obscures the heading and first few lines of text so you can’t see it.
As I said it’s fine on any other device but not on my iPad. But maybe my iPad is too old (version 9.3.5 13g36).
What iPad version have you tested it on?
Thanks,
CarolinNovember 28, 2017 at 6:19 am #882522Hi,
We modified the code a bit. It is working now but we had to remove the smooth scroll animation.
Best regards,
IsmaelDecember 11, 2017 at 6:03 pm #887524Hi Ismael,
Same problem here, see my thread:
– https://kriesi.at/support/topic/one-page-navigation-sticky-header-moves-content-behind-header-on-tabletI just tried your code as give at November 24, 2017 at 6:42 am. However, it does not work. You say “We modified the code a bit. It is working now but we had to remove the smooth scroll animation.”. Can you please provide the latest code?
I’m dealing with the issue at this site:
– https://foodlablimburg.nl/Thnx,
MarcDecember 12, 2017 at 5:20 am #887700 -
AuthorPosts
- The topic ‘anchors in navigation icons on iPad’ is closed to new replies.