Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1444074

    Hello
    I’m using a sticky menu on tablets and mobiles that works perfectly
    Here the code:

    @media only screen and (max-width: 989px) {
    .html_stretched.responsive.html_mobile_menu_tablet.html_header_top #top #main {
        margin-top: 120px !important; }
      .html_stretched.responsive.html_mobile_menu_tablet #top #wrap_all #header {
        position: fixed !important; 
      }}
    
    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all #header {
        position: fixed;
    }}

    I also use the Alb full width submenu to point some anchor links.
    The problem with anchor links is that they don’t stop scrolling under the Alb full width submenu.
    How can I have the page scrollig to the anchor and stopping before the Alb full width submenu which has also different heights in tablets or mobilephones?

    I’ve tried to add the function:

    function mobile_sub_menu_sticky() { ?>
    <script>
    window.addEventListener('DOMContentLoaded', function() {
      (function($){
      	var width = $(window).width();
        var $stickyTop = $('#sub_menu1');
        if (width <= 989) {
        $stickyTop.waypoint(function(direction) {
          if (direction === 'down') {
             $stickyTop.addClass('sticky-top');
          }
          if (direction === 'up') {
             $stickyTop.removeClass('sticky-top');
          }
        }, {
          offset: '0%'
        });
        }
      })(jQuery);
    });
    </script>
      <?php
    }
    add_action('wp_footer', 'mobile_sub_menu_sticky');

    And then the CSS:

    .sticky-top {
    	position:fixed!important;
    	top:120px!important;
    	z-index:600!important;
    }

    But it didn’t work

    Thank you
    Manu

    • This topic was modified 7 months, 1 week ago by manurimini.
    • This topic was modified 7 months, 1 week ago by manurimini.
    • This topic was modified 7 months, 1 week ago by manurimini.
    • This topic was modified 7 months, 1 week ago by manurimini.
    • This topic was modified 7 months, 1 week ago by manurimini.
    #1444422

    Hey manurimini,
    As I understand your question when you click a anchor link the page scrolls too far and goes under the sticky sub-menu, to change this you will need to adjust the offset.
    The following script will change it but you may need to adjust the offset for your site, so in this example our header is 80px high on mobile and the sub-menu is 60px height, making 140px:
    Enfold Support 5839
    The height doesn’t change until 990px when the burger menu is replaced with text items, and then the header is 90px high on mobile and the sub-menu is 60px height, making 150px:
    Enfold Support 5841
    So add this code to the end of your child theme functions.php file in Appearance ▸ Editor or If you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:
    Enfold_Support_2680.jpeg
    then add this code and save.

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

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    Note that there is four places you may need to adjust two 140px & two 150px
    Also note that you can add more space if you like, it doesn’t have to be exact.
    In my example I added a red border around the sections to make it easy to see, on mobile it is like this:
    Enfold Support 5843
    and on tablet 1024px like this:
    Enfold Support 5845
    and desktop like this:
    Enfold Support 5847
    Please note that when testing by changing your browser widow size it is best to reload the page so the screen size can be recalculated, this won’t be an issue on real devices.

    Best regards,
    Mike

    #1445127

    Hello Mike
    Sorry for the late reply. The code works.
    Thanks!

    #1445138

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

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