Jump link locations overlapped by sticky menu

Hi there :slight_smile:

I have added a jump link, and added its unique ID’s to the header menu. This all works great until I make the header menu sticky (using the My Sticky Menu plugin)> visiting the jump link URL still works but the sticky menu overlaps part of the content.

Desired: http://screencast.com/t/u9JjqZiAKIUG

Current (with sticky menu active): http://screencast.com/t/kAivjxTxiJ

Same issue with the jump link button in the Revolution Slider.

I have installed the Volts theme that comes with Live Composer. On the homepage I have added several rows and gave them a unique ID. I have tried placing the jump link ID’s elsewhere in the content but can’t get it right.

Hope you guys can help.

Thanks!

  • Adam Czajczyk

    Hello Syl,

    I hope you're well today and thank you for your question!

    I checked the screenshots that you attached to your post but I would like to check the site in question as well. I can see that there are multiple domains registered with your account but none of theme is assigned to this thread so could you please point me to the site/page in question?

    I'd then take a look and hopefully suggest a simple solution.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Syl!

    Thanks for sharing the site. I checked it and I think you could try following CSS:

    .dslc-modules-section-wrapper {margin-top:60px;}
    #rev_slider_1_1_forcefullwidth {margin-top:-60px;}

    To apply it to your site please put it either into the "style.css" file of your child-theme (if you're using a child theme) or use the "Simple Custom CSS" plugin. If your theme's options include "custom css" box that may be used as well.

    In case it didn't work, try this version:

    .dslc-modules-section-wrapper {margin-top:60px!important;}
    #rev_slider_1_1_forcefullwidth {margin-top:-60px!important;}

    Let me know please if that worked for you.

    Best regards,
    Adam

  • Dimitris

    Hey there Syl,

    hope you're having a beautiful day and don't mind skipping in! :slight_smile:

    The code works, however it just adds space to the rows and header making them look wel, awkward. I am looking for a way to have the sticky menu touch the top of the rows that has been called.

    The easiest path would be to simply use top paddings equal to the navbar height.
    If you want to try this only to the aforementioned section, try:

    #bedrijven {
      padding-top:120px;
      padding-bottom:120px;
    }

    If you want to try this for all sections in homepage, try:

    .home .dslc-modules-section {
      padding-top:120px;
      padding-bottom:120px;
    }

    (I use the same bottom paddings for better visual consistency)

    Hope that helps,
    Dimitris

    PS. The solution I provided is not in conjunction with Adam's solution, so please comment-out these before testing the newer ones. :wink:

  • Syl

    Hi Dimitris,

    Thanks for helping out too :slight_smile:

    Adding padding is a solution, yet it does the same as Adam's fix> it adds a big gap between the row's header text and the previous row.

    Desired: http://screencast.com/t/T39XtG9xot

    120px padding: http://screencast.com/t/lbvBmJsclxy

    I would like to keep my current space between a row's header text and the previous row's content. But have the sticky menu touch the top of the row called.

    Like so: http://screencast.com/t/lZoaJKWB7

    Thanks for helping out guys!

  • Dimitris

    Hello Syl,

    this can be overpassed by using some jQuery magic! :wink:

    (function($) {
    $("#menu-item-1326 a").click(function() {
        $('html, body').animate({
            scrollTop: $("#bedrijven").offset().top-120
        }, 300);
    });
    })( jQuery );

    #menu-item-1326: The ID of the list element, you should be able to locate this through dev tools. Another approach it would be to use a Custom Class for this menu element and target this one.
    #bedrijven: The ID of the target element
    -120: This is where we scroll a bit more (120px). I used this value as the navbar height is 120px, but you may want to change this later on.
    300: The time (ms) in which the scrolling is over

    I presume that your theme provide a Custom JS section to use the snippet. If not, you can find a variety in w.org repositories. :wink:
    https://wordpress.org/plugins/search.php?q=custom+js

    Warm regards,
    Dimitris :slight_smile:

    PS. None of the previous CSS solutions are required for this.

  • Adam Czajczyk

    Hello Syl!

    The pure CSS-based solution would require media queries to be used for this, here however we first need to read screen width with JS and then scroll based on that. Here's the code that Dimitris provided you with but with an additional screen width check:

    (function($) {
    $("#menu-item-1326 a").click(function() {
        var width = $(window).width();
        if (width < 481) {
          $('html, body').animate({
              scrollTop: $("#content").offset().top-150
          }, 300);
        } else {
          $('html, body').animate({
              scrollTop: $("#content").offset().top-120
          }, 300);
        }
    });
    })( jQuery );

    You will want to adjust width value in check I think so let me explain the code. This line is the width check:

    if (width < 481) {

    It means that the code right below it (inside brackets { }) should be executed if a screen width is less than 481 pixels. This 481 value is the one you may want to adjust. The code inside brackets right below this is the scroll code for mobile so it's using "-150" offset.

    The second (lower) code that looks the same but is using "-120" is for all other devices.

    The whole code is a replacement (not an addition) for Dimitris' code.

    I hope that helps!

    Best regards,
    Adam

  • Syl

    Hi,

    I used the new code. Works fine for desktops but unfortunately not for mobile. There's actually no change it seems. I kept your minimum screenwidth for testing.

    (function($) {
    $("#menu-item-1326 a").click(function() {
        var width = $(window).width();
        if (width < 481) {
          $('html, body').animate({
              scrollTop: $("#bedrijven").offset().top-150
          }, 300);
        } else {
          $('html, body').animate({
              scrollTop: $("#bedrijven").offset().top-120
          }, 300);
        }
    });
    })( jQuery );

    Thanks!

  • Adam Czajczyk

    Hello Syl!

    First of all, I see you fixed the code by setting proper ID for "scrollTop". It's great that you noticed that and I'm sorry I didn't.

    As for the code itself. Is it still there on your site? I tested the site with Firefox responsive view tool and it seems that it doesn't scroll as expected in smaller resolutions indeed. It was working fine when tested on my own site.

    Can you confirm that it's still added to your page? Also, what way/where to did you add the code? I'm asking this because I'd like to check it by myself and if it's added via a "custom js kind of" plugin I could make use of a support access WPMU DEV Dashboard tool Here's a guide on how you could grant it to me:

    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Adam

  • Dimitris

    Hey there Syl,

    hope you're doing good today! :slight_smile:

    The issue here was that the mobile menu is another menu (a select option actually). I managed to resolve this by replacing previous snippet with this one

    (function($) {
    
      var width = window.innerWidth ? window.innerWidth : $(window).width();
      console.log('W: ' + width);
    
      if (width < 481 ) {
    
        $('#mobile-nav select').on('change', function() {
          var value = $("#mobile-nav select option:selected").val();
          console.log('value: ' + value);
    
          if ( value == "/#bedrijven" ) {
            $('html, body').animate({
                scrollTop: $("#bedrijven").offset().top-150
            }, 300);
          }
          else if ( value == "/#massagetherapie" ) {
            $('html, body').animate({
                scrollTop: $("#massagetherapie").offset().top-150
            }, 300);
          }
          else if ( value == "/#overmij" ) {
            $('html, body').animate({
                scrollTop: $("#overmij").offset().top-150
            }, 300);
          }
          else if ( value == "/#contact" ) {
            $('html, body').animate({
                scrollTop: $("#contact").offset().top-150
            }, 300);
          }
          else if ( value == "/#testimonials" ) {
            $('html, body').animate({
                scrollTop: $("#testimonials").offset().top-150
            }, 300);
          }
          else if ( value == "/#partners" ) {
            $('html, body').animate({
                scrollTop: $("#partners").offset().top-150
            }, 300);
          }
    
        });
    
      } else {
    
        $("#menu-item-1326 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#bedrijven").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1327 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#massagetherapie").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1328 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#overmij").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1329 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#contact").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1330 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#testimonials").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1331 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#partners").offset().top-120
          }, 300);
        });
    
      }
    
    })( jQuery );

    Warm regards,
    Dimitris :slight_smile:

  • Dimitris

    Just noticed the issue you mentioned while clicking the hash-links from other pages.
    I surpassed this using the location.hash property. :slight_smile:

    (function($) {
    
      var width = window.innerWidth ? window.innerWidth : $(window).width();
      console.log('width: ' + width);
    
      if (width < 481 ) {
    
        $('#mobile-nav select').on('change', function() {
          var value = $("#mobile-nav select option:selected").val();
          console.log('value: ' + value);
    
          if ( value == "/#bedrijven" ) {
            $('html, body').animate({
                scrollTop: $("#bedrijven").offset().top-150
            }, 300);
          }
          else if ( value == "/#massagetherapie" ) {
            $('html, body').animate({
                scrollTop: $("#massagetherapie").offset().top-150
            }, 300);
          }
          else if ( value == "/#overmij" ) {
            $('html, body').animate({
                scrollTop: $("#overmij").offset().top-150
            }, 300);
          }
          else if ( value == "/#contact" ) {
            $('html, body').animate({
                scrollTop: $("#contact").offset().top-150
            }, 300);
          }
          else if ( value == "/#testimonials" ) {
            $('html, body').animate({
                scrollTop: $("#testimonials").offset().top-150
            }, 300);
          }
          else if ( value == "/#partners" ) {
            $('html, body').animate({
                scrollTop: $("#partners").offset().top-150
            }, 300);
          }
    
        });
    
      } else {
    
        var hash = window.location.hash;
        console.log('hash: ' + hash);
        if ( hash == '#bedrijven') {
          $('html, body').animate({
              scrollTop: $("#bedrijven").offset().top-120
          }, 300);
        }
        else if ( hash == '#massagetherapie') {
          $('html, body').animate({
              scrollTop: $("#massagetherapie").offset().top-120
          }, 300);
        }
        else if ( hash == '#overmij') {
          $('html, body').animate({
              scrollTop: $("#overmij").offset().top-120
          }, 300);
        }
        else if ( hash == '#contact') {
          $('html, body').animate({
              scrollTop: $("#contact").offset().top-120
          }, 300);
        }
        else if ( hash == '#testimonials') {
          $('html, body').animate({
              scrollTop: $("#testimonials").offset().top-120
          }, 300);
        }
        else if ( hash == '#partners') {
          $('html, body').animate({
              scrollTop: $("#partners").offset().top-120
          }, 300);
        }
    
        $("#menu-item-1326 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#bedrijven").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1327 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#massagetherapie").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1328 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#overmij").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1329 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#contact").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1330 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#testimonials").offset().top-120
          }, 300);
        });
    
        $("#menu-item-1331 a").click(function() {
          $('html, body').animate({
              scrollTop: $("#partners").offset().top-120
          }, 300);
        });
    
      }
    
    })( jQuery );

    Cheers,
    Dimitris

  • Syl

    Hi Dimitris,

    I am so sorry but the new code does not work very well :slight_frown: I have used the second code you've shared. Still active on the site.

    On desktop size everything works well from the homepage, but when using the menu items from another page this happens: http://screencast.com/t/lpARpgovSw

    The only one working correctly is menu item 1327 (#massagetherapie).

    Mobile
    The mobile menu works but when used from a different page, the menu doesn't work at all > nothing happens when tapping the menu items. The only one that does work is the Home item, that one doesn't have addiotional code.

    http://screencast.com/t/69kHeZQt

    Really appreciate your help!

  • Adam Czajczyk

    Hello Syl!

    Thank you for your response.

    I checked Dimitris' code just to make sure that it's all right and I couldn't spot any errors there. In terms of "work logic" it also seems all right. I can see the issue happening on your site but I think going further with this would require making the code even more complex and most likely introducing some additional offset calculations.

    It has already reached the custom development stage which is well outside the scope of this forum. I think it would be best if you could ask supplementary question in the "Members" area of our forum where other members of our WPMU DEV community may be able to provide you with either adjustments to this code or a completely different solution (perhaps even CSS only based but I cannot guarantee this).

    In case you'd need it urgently and would require the code to be written for you you may also want to ask a question about custom development at our "Jobs & Pros" job board (please note: no WPMU DEV staff members involved!) here:
    https://premium.wpmudev.org/wordpress-development/

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.