Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1451612

    Hi
    I would like to return to the closed topic: Alb full width submenu sticky on mobile to share an important upgrade.
    The topic explained how to use the Fullwidth Sub Menu of the ALB also sticky on mobile devices.
    After entering the code, I noticed that the pages were scrolling jerkily. So I added the following CSS code:

    html {
      scroll-behavior: smooth;
    }

    I don’t know if this is the most orthodox solution, but it works.
    I tried to solve it with a smooth scrolling function but I couldn’t. I used this code but it doesn’t work:

    function smooth_scroll(){
        ?>
        <script>
            // Your function here
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
    
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
        </script>
        <?php
    }
    add_action('wp_footer', 'smooth_scroll');

    If you have any suggestions to improve smooth scrolling, they are welcome.
    Best Regards
    Manu

    #1451702

    i have this solution with complete replacement of all menu files in my child-theme shortcodes folder.
    All files – because there are in original css rules with !important setting. This is something you could not overwrite with other css.
    And inside the js file we had to set a different calculation. Especially the case: if( burger_menu.is(“:visible”) ) had to be set in a different way.

    See example page: https://webers-testseite.de/transparent-header/

    here are the edited menu files: https://webers-testseite.de/menu.zip

    on that testpage – there are two submenus – and it works with full-menu or with second hamburger ( test under 479px)

    #1451705

    in detail : it is this calculation case:

    if( burger_menu.is(":visible") )
    {
    	this.css({top: 'auto', position: 'absolute'}); fixed = false;
    	return;
    }

    that is replaced by that:

    if( burger_menu.is(":visible") && (scrolled + modifier > top_pos) )
    {
        this.css({top: header.Height() , position: 'fixed !important'}); fixed = true;
    }

    and these values are set all to !important in the original menu.css

    @media only screen and (max-width: 989px){
    	.responsive #top .av-switch-990.av-submenu-container{
    		top: auto ;
    		position: relative ;
    	}
    	/**** … ***/
    }
    
    @media only screen and (max-width: 767px){
    	.responsive #top .av-switch-768.av-submenu-container{
    		top: auto ;
    		position: relative ;
    	}
    	/**** … ***/
    }
    
    @media only screen and (max-width: 479px){
    	.responsive #top .av-switch-480.av-submenu-container{
    		top: auto ;
    		position: relative ;
    	}
    	/**** … ***/
    }

    only if they could be overwritten by that js script – the mobile sticky submenu will work.

    #1451984

    Hi
    Sorry Guenny 007 but I don’t understand how this solution, although very interesting, can help me. It may also be that I misunderstood how to use the files you kindly make available, but the links on the example page point to other pages, while I am trying to solve scrolling within the same page so that the anchorpoint content does not go under the Fullwidth Sub Menu of the ALB of tablets and mobiles.

    Trying to resolve this issue, I had problems with pages scrolling in a jerky motion, but I figured out what my error was.
    Mike had given me a function to solve the problem involving two screen widths < 989 and > 990.
    Mike’s code works very well and gives no smooth scrolling problems.
    I did, however, need a third screen width (> 768 < 989) because the Fullwidth Sub Menu of the ALB on mobile phones would go on two rows.
    So I tried adding to the script:
    else if ((width > 767 && width < 989)) {
    At this point the scrolling of the site started to work horribly on all pages. It is obvious that I messed up something when I added the third screen width.
    This is Mike’s code that works:

    function custom_change_offset() { ?>
      <script>
    (function($) {
    	var width = $(window).width();
        if ((width < 989)) {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) {
    
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - 140 //offset
            }, 1000);
            return false;
          }
        }
      });
      //Executed on page load with URL containing an anchor tag.
      if($(location.href.split("#")[1])) {
          var target = $('#'+location.href.split("#")[1]);
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - 140 //offset
            }, 1000);
            return false;
          }
        }
        } 
        else if ((width > 990)) {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) {
    
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - 150 //offset
            }, 1000);
            return false;
          }
        }
      });
      //Executed on page load with URL containing an anchor tag.
      if($(location.href.split("#")[1])) {
      	var targett = $('#'+location.href.split("#")[1]);
          if (targett.length) {
            $('html,body').animate({
              scrollTop: targett.offset().top - 150 //offset
            }, 1000);
            return false;
          }
        }
        }
    }(jQuery));
    </script>
      <?php
    }
    add_action( 'wp_footer', 'custom_change_offset', 99 );

    And this is the code revised by me that makes the whole site scroll badly even though it puts the anchor points in the right place:

    function custom_change_offset() { ?>
      <script>
    (function($) {
    	var width = $(window).width();
        if (width < 767)) {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) {
    
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - 220 //offset
            }, 1000);
            return false;
          }
        }
      });
      //Executed on page load with URL containing an anchor tag.
      if($(location.href.split("#")[1])) {
          var target = $('#'+location.href.split("#")[1]);
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - 220 //offset
            }, 1000);
            return false;
          }
        }
        } 
    	else if ((width > 768 && width < 989)) {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) {
    
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - 170 //offset
            }, 1000);
            return false;
          }
        }
      });
      //Executed on page load with URL containing an anchor tag.
      if($(location.href.split("#")[1])) {
      	var targett = $('#'+location.href.split("#")[1]);
          if (targett.length) {
            $('html,body').animate({
              scrollTop: targett.offset().top - 170//offset
            }, 1000);
            return false;
          }
        }
        } 
       else if ((width > 990)) {
      $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) {
    
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top - 180 //offset
            }, 1000);
            return false;
          }
        }
      });
      //Executed on page load with URL containing an anchor tag.
      if($(location.href.split("#")[1])) {
      	var targett = $('#'+location.href.split("#")[1]);
          if (targett.length) {
            $('html,body').animate({
              scrollTop: targett.offset().top - 180//offset
            }, 1000);
            return false;
          }
        }
        } 
    }(jQuery));
    </script>
      <?php
    }
    add_action( 'wp_footer', 'custom_change_offset', 99 );

    If anyone can help me, I’d like to figure out where I went wrong and be able to use three different offsets for the three different screen widths.

    • This reply was modified 6 months ago by manurimini.
    #1452089

    Hi,

    Thank you for the update.

    Please create a backup of the previous modification, then replace it with this updated code:

    
    function ava_custom_script_change_offset()
    { ?>
        <script>
            (function ($)
            {
                var width = $(window).width();
    
                $('a[href*="#"]:not([href="#"])').click(function ()
                {
                    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname)
                    {
                        var target = $(this.hash);
                        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
                        if (target.length)
                        {
                            var offset = 0;
                            if (width < 767)
                            {
                                offset = 220;
                            } else if (width >= 767 && width < 989)
                            {
                                offset = 170;
                            } else if (width >= 989)
                            {
                                offset = 180;
                            }
    
                            $('html, body').animate({
                                scrollTop: target.offset().top - offset
                            }, 1000);
                            return false;
                        }
                    }
                });
    
                $(window).on('load', function ()
                {
                    var hash = location.href.split("#")[1];
                    if (hash)
                    {
                        var target = $('#' + hash);
                        if (target.length)
                        {
                            var offset = 0;
                            if (width < 767)
                            {
                                offset = 220;
                            } else if (width >= 767 && width < 989)
                            {
                                offset = 170;
                            } else if (width >= 989)
                            {
                                offset = 180;
                            }
    
                            $('html, body').animate({
                                scrollTop: target.offset().top - offset
                            }, 1000);
                            return false;
                        }
                    }
                });
    
            })(jQuery);
        </script>
        <?php
    }
    add_action('wp_footer', 'ava_custom_script_change_offset', 99);

    Best regards,
    Ismael

    #1452331

    Sorry Ismael,
    I had to delete this comment because I need further investigations
    Best Regards
    Manu

    • This reply was modified 6 months ago by manurimini.
    • This reply was modified 6 months ago by manurimini.
    #1453434

    Hi,

    No problem. We’ll keep the thread open. Let us know if you encounter any issues.

    Best regards,
    Ismael

    #1458271

    Hi Ismael,
    After many tests on different installations, I have come to the conclusion that the lagging scrolling behavior is given by the function:
    https://kriesi.at/documentation/enfold/fullwidth-sub-menu/#toggle-id-4

    /**
     * Full Width Submenu active
     */
    
    function activateMenuItem(){
    ?>
    <script>
         jQuery(document).scroll(function() {      
         var sections = jQuery('.avia-section'),
             menu   = jQuery('.av-submenu-container'),
             nav_height = menu.outerHeight();
             jQuery(window).on('scroll', function() {
                var cur_pos = jQuery(this).scrollTop();
                sections.each(function() {
                    var top = jQuery(this).offset().top - 300,
                        bottom = top + jQuery(this).outerHeight();
                    if (cur_pos >= top && cur_pos <= bottom) {
                        menu.find('li').removeClass('active-menu-item');                    
                        menu.find('a[href="#' + jQuery(this).attr('id') + '"]').parent('li').addClass('active-menu-item');
                    }
                });
            });
        });
     
    </script>
    <?php
    }
    add_action('wp_head', 'activateMenuItem');

    Is there another way to set active on the ALB Fullwidth Sub Menu?
    Thank you
    Best Regards
    Manu

    #1458555

    Hi,

    Thank you for the info.

    Where can we check the issue? Please provide the site URL in the private field.

    Best regards,
    Ismael

    #1458648

    Hi Ismael,
    This is the link to the website we are building: https://www.clinicagrafica.it/domus
    We have also prepared login credentials for you. You’ll find the credentials in Private Content.
    The issue (the lagging scrolling behavior) is particularly visible in Safari if you are using MacOs, while on Microsoft the issue is on all browsers.
    Best Regards
    Manu

    #1459258

    Hi,

    Thank you for the access.

    We edited the script so that it only activates when the “av-submenu-container” element exists. This seems to improve performance on the home page and other pages with the element.

    /**
     * Full Width Submenu active
     */
    
    function activateMenuItem() {
    ?>
    <script>
        jQuery(document).ready(function() {
            var menu = jQuery('.av-submenu-container');
    
            if (menu.length) {
                var sections = jQuery('.avia-section'),
                    nav_height = menu.outerHeight();
    
                jQuery(window).on('scroll', function() {
                    var cur_pos = jQuery(this).scrollTop();
                    sections.each(function() {
                        var top = jQuery(this).offset().top - 300,
                            bottom = top + jQuery(this).outerHeight();
    
                        if (cur_pos >= top && cur_pos <= bottom) {
                            menu.find('li').removeClass('active-menu-item');
                            menu.find('a[href="#' + jQuery(this).attr('id') + '"]').parent('li').addClass('active-menu-item');
                        }
                    });
                });
            }
        });
    </script>
    <?php
    }
    add_action('wp_head', 'activateMenuItem');
    

    Best regards,
    Ismael

    #1459870

    Thank you Ismael
    The website now seems to be scrolling quite smoothly.

    Best Regards
    Manu

    • This reply was modified 5 months, 4 weeks ago by manurimini.
    #1459915

    Hi,

    Glad to know that the issue has been resolved! Please feel free to open another thread if you have more questions about the theme.

    Have a nice day.

    Best regards,
    Ismael

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Alb full width submenu sticky on mobile upgrade’ is closed to new replies.