Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1446689

    Hi
    A few days ago Mike provided me with a function to make sure that using the sticky menu on mobiles and tablets the anchors scroll correctly by adding the additional sticky menu of the ALB.
    https://kriesi.at/support/topic/alb-full-width-submenu-sticky-on-mobile/

    The code works perfectly but only takes into account two screen sizes: < 989 and >990.
    I would need an integration to be able to use it on three different screen sizes: <768 for mobiles < 989 for itablets and >990.
    I tried to write it myself but couldn’t do it. I basically can’t write the middle line of code which should be something that looks like else if ((width >768 <990)) {

    Below is Mike’s code

    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 );
    #1446703

    Hey manurimini,

    Thank you for the inquiry.

    I tried to write it myself but couldn’t do it. I basically can’t write the middle line of code which should be something that looks like else if ((width >768 <990)) {

    The condition should look something like this:

    if (width > 768 && width < 990) {
    

    Let us know if this works.

    Best regards,
    Ismael

    #1446726

    Thank you Ismael
    I only changed the code a little bit
    if ((width > 768 && width < 990)) {
    Now it works like a charme!
    Best Regards
    Manu

    • This reply was modified 4 months ago by manurimini.
    #1446754

    Hi,

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

    Best regards,
    Rikard

    #1446845

    Hi,
    As I previously wrote the code works fine so we can close the topic.

    If I may suggest I would love to have the possibility to use a sticky menu on tablets and mobiles and be able to select it directly in the HEADER settings.
    And have calculated by the theme all the top margins of the containers perfectly.

    Best Regards
    Manu

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