Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #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,
    Carolin

    #864638

    Hey Carolin,

    I have checked your site on the iPad device and all looks work normally.

    Best regards,
    John Torvik

    #865448

    Hi 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=0

    Thanks,
    Carolin

    #865652

    Hi Carolin,

    Here are some threads to consider:

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #866517

    I 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.
    #867419

    Hi,

    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,
    Ismael

    #867433

    Hi 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,
    Carolin

    #867959

    Hi,

    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,
    Ismael

    #867968

    Hi 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,
    Carolin

    #868003

    Hi,

    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,
    Ismael

    #869307

    Hi 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,
    Carolin

    #869356

    I 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.
    #869935

    Hi,

    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,
    Ismae

    #871870

    Yes, 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.

    #871995

    Hi,

    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,
    Ismael

    #872320

    Hi 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,
    Carolin

    #873500

    Hi,

    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,
    Ismael

    #877835

    Hi 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!
    Carolin

    #878379

    Hi,

    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,
    Ismael

    #880984

    Hi Ismael,

    please see the info in the private content.

    Thanks,
    Carolin

    #881075

    Hi,

    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,
    Ismael

    #881424

    Hi 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,
    Carolin

    #881633

    Hi Carolin,

    Could you please clear the cache, check again and get back to us. Or try on another device?

    Best regards,
    Victoria

    #882436

    Hi 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,
    Carolin

    #882522

    Hi,

    We modified the code a bit. It is working now but we had to remove the smooth scroll animation.

    Best regards,
    Ismael

    #887524

    Hi Ismael,

    Same problem here, see my thread:
    https://kriesi.at/support/topic/one-page-navigation-sticky-header-moves-content-behind-header-on-tablet

    I 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,
    Marc

    #887700

    Hi,


    @Marc
    Bijl: The original issue is related to the “icon box” element. Please continue on your own thread. We’ll check it there.

    Best regards,
    Ismael

Viewing 27 posts - 1 through 27 (of 27 total)
  • The topic ‘anchors in navigation icons on iPad’ is closed to new replies.