Tagged: , , , ,

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • December 10, 2017 at 11:47 am #887079
    Marc Bijl

    I created a one page site with a sticky header/menu. The development version is here: https://foodlablimburg.marcbijl.nl

    In Mac desktop browsers (Firefox, Chrome, Safari), the navigation works nice. Also after resizing the browser window to e.g. 1024×768 (which is the iPad resolution) or even smaller.

    However, on a tablet (iPad with Safari), the menu links cause the content to partly disappear behind the sticky header. Result: H2 titles are not visible.

    How to solve this issue?

    December 11, 2017 at 7:09 am #887244
    Rikard

    Hey Marc,

    Did you try to activate the mobile menu for tablets as well under Enfold->Main Menu?

    Best regards,
    Rikard

    December 11, 2017 at 11:13 am #887277
    Marc Bijl

    Hi @Rikard, thnx for the reply!

    No I didn’t. Actually there’s no need to activate mobile menu for tablets, since the regular menu looks good on tablets (the menu has only 5 very small items).

    I checked the Enfold one page demo’s (portfolio and restaurant) on an iPad too, and see the sticky navigation causes the content to disappear partly behind the header as well; however since the heading texts have quite a top-margin, it doesn’t really hurt (it’s not really an issue).

    – https://kriesi.at/themes/enfold-restaurant-one-page
    – https://kriesi.at/themes/enfold-one-page-portfolio

    That said: how comes the issue only happens on the iPad? Is there a solution/workaround? For example, moving the content a bit down (adding a top margin at the navigation anchors) or something…

    • This reply was modified 7 years ago by Marc Bijl.
    December 11, 2017 at 2:28 pm #887412
    Victoria

    Hi Marc Bijl,

    Here is a thread for you to consider

    Anchor issue with sticky header on Ipad

    anchors in navigation icons on iPad

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

    December 12, 2017 at 9:52 am #887798
    Marc Bijl

    Hi @victoria_d and @rikard,

    I got suggested to look at two other threads; however, the first one (https://kriesi.at/support/topic/anchor-issue-with-sticky-header-on-ipad/) has not been updated since July, and at the second one @ismael asked me to continue here, at my own thread (https://kriesi.at/support/topic/anchors-in-navigation-icons-on-ipad/#post-887700).

    So can please anyone look at my issue?

    As said: I checked the Enfold one page demo’s (portfolio and restaurant) on an iPad too, and see the sticky navigation causes the content to disappear partly behind the header as well; however since the heading texts have quite a top-margin, it doesn’t really hurt (it’s not really an issue). But the anchor definitely is behind the sticky header.

    – https://kriesi.at/themes/enfold-restaurant-one-page
    – https://kriesi.at/themes/enfold-one-page-portfolio

    December 14, 2017 at 3:18 am #888710
    Ismael

    Hi,

    We are very sorry for the late response.

    This is the code that we provided in the previous thread in order to fix the anchor on iPad view.

    // custom script
add_action( 'wp_footer', 'ava_custom_script' );
function ava_custom_script() {
?>
<script type="text/javascript">
(function($) {
  function a() {
      $('#top #header .av-main-nav > li').on('click touchstart', 'a', function(e) {
          if( $(window).innerWidth >= 1025 ) return;
          var anchor, loc, cur, hash, tab, parent, pos;
          anchor = $(this).attr('href');
          hash = anchor.substring(anchor.indexOf('#')).replace(/\#/g, '');
          anchor = $('.avia-section[id='+ hash +']');
          pos = anchor.offset();
	
          if(hash) $(window).scrollTop( pos.top - 100 );
      });
  }

  a();
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

    February 22, 2018 at 4:06 pm #916150
    Gregory

    Hi @Ismael- would I place this code at the top of the “functions-enfold.php” file?

    Thx,
    Greg

    February 22, 2018 at 8:19 pm #916292
    Basilis

    Hi,

    No, please place on functions.php :)

    Thank you very much

    Best regards,
    Basilis

    February 22, 2018 at 10:05 pm #916362
    Gregory

    Thanks for the response Basilis.

    Greg

    February 23, 2018 at 6:57 am #916529
    Rikard

    Hi Greg,

    Thanks for the feedback, please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    February 23, 2018 at 10:49 am #916572
    Guenni007

    is there any private content i can’t see ?
    because the link above is no enfold theme. I’m wondering about the flyout mobile menu.

    February 23, 2018 at 6:20 pm #916790
    Gregory

    So I had a slightly different situation that I think I worked through. Thought I’d post here in the event anyone else can benefit.

    I was using a Button (not a navigation link) to scroll to different sections on the page. Found the section in avia.js that controlled click to a hash tag and added the following line:

    if( $(window).innerWidth() < 1025 && $(window).innerWidth() > 736 ) { target -= 100; }

    That line was placed within this block:

    if(container.length)
	{
		var cur_offset = the_win.scrollTop(),
			container_offset = container.offset().top,
			target =  container_offset - fixedMainPadding,
			hash = window.location.hash,
			hash = hash.replace(/\//g, ""),
			oldLocation=window.location.href.replace(hash, ''),
			newLocation=this,
			duration= data.duration || 1200,
			easing= data.easing || 'easeInOutQuint';
		
		if( $(window).innerWidth() < 1025 && $(window).innerWidth() > 736 ) { target -= 100; }
		if(sticky_sub.length && container_offset > sticky_sub.offset().top) { target -= sticky_sub.outerHeight() - 3;}
		
		// make sure it's the same location
		if(oldLocation+newHash==newLocation || originHash)
		{
			if(cur_offset != target) // if current pos and target are the same dont scroll
			{
				if(!(cur_offset == 0 && target <= 0 )) // if we are at the top dont try to scroll to top or above
				{
					the_win.trigger('avia_smooth_scroll_start');

    Not sure if there was a better way to handle, but seems to be working properly now on iPad Portrait and Landscape for me.

    Thx
    Greg

    • This reply was modified 6 years, 10 months ago by Gregory.
    February 26, 2018 at 3:02 am #917626
    Ismael

    Hi,

    @Gregory: Glad that you fixed it. That modification is almost the same as the previous one. We decrease the scroll position value by 100px.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.