Docs

[MIGAMusic]

Hi,

My website is: http://migamusic.net, and I was wondering if it was possible to have a fixed nav-bar with working anchor links on the desktop as well as a static nav-bar on mobile (as I have it set) with properly working anchor links as well. My problem is that on mobile, or even shrunken browser mode, it does not scroll to the correct spot as it is accounting for the header I believe. Any way to fix?

Thank you,

[MIGAMusic]

Okay, so I have it working using the hamburger menu using this code as given on another post, but I would like it to work for all of the buttons on my page as well, how would I do that? This is the code I used:

// Fixing One Page Navbar Offset on Mobiles
jQuery(document).ready(function($) {
   function belowMastheadArrow() {
      var $body           = $('body');
      var $bodyHeight     = $body.outerHeight();
      var $adminbarHeight = $('#wpadminbar').outerHeight();
      var $navbarHeight   = $('.x-navbar').outerHeight();

      var scrollSpyLinks = $('.x-nav > li > a[href^="#"]');
      if ($(window).width() <= 979) {
         scrollSpyLinks.off('click touchstart'); 
         scrollSpyLinks.on('click touchstart', function(e) {
            e.preventDefault();
            var $contentBand = $(this).attr('href');
            $('html, body').animate({
               scrollTop: $($contentBand).offset().top + 1
            }, 850, 'easeInOutExpo');
         });
      } else {
         scrollSpyLinks.off('click touchstart'); 
         scrollSpyLinks.on('click touchstart', function(e) {
            e.preventDefault();
            var $contentBand = $(this).attr('href');
            $('html, body').animate({
               scrollTop: $($contentBand).offset().top - $adminbarHeight - $navbarHeight + 1
            }, 850, 'easeInOutExpo');
         });
      }
   }

   belowMastheadArrow();

   $(window).resize(belowMastheadArrow);
});

Essentially I just want this code to work for my buttons on MOBILE where the header is STATIC not FIXED as well. Please help!

[Rupok]

Hi there,

Thanks for writing in! It seems mobile menu anchors are working fine as expected. Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[MIGAMusic]

Hi, if you reduce the browser size to mobile size where the hamburger menu shows up, and click one of my anchor link buttons (the D theme 3D short code buttons, like ” Learn more. ” in the first content area) in each content area, you will see that the button misses and doesn’t scroll far enough downwards, however, in desktop view, it scrolls perfectly. I want it to scroll properly in mobile view. The photo attached is how it scrolls on mobile. I want it to scroll properly such that it scroll like it sores on desktop, where you can’t see any of the other content area.

Thanks

[Paul R]

Hi,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[MIGAMusic]

This reply has been marked as private.

[MIGAMusic]

Hi, just an update:

This code:

Query(document).ready(function(){
    jQuery('a[href^="#"]').on('click',function (e) {
        e.preventDefault();

        var target = this.hash,
        jQuerytarget = jQuery(target);

        jQuery('html, body').stop().animate({
            'scrollTop': jQuerytarget.offset().top - 0
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

sort of works, maybe a little more down (like 2px) would be nice, but it is applying to desktop as well, but I need it mobile only… unfortunately I don’t know enough about jQuery to do it on my own, so some help would be appreciated.

[Rad]

Hi there,

Please try this,

jQuery(document).ready(function(){
    jQuery('a[href^="#"]').on('click',function (e) {

if ( jQuery(window).width() <= 979 ) {

        e.preventDefault();

        var target = this.hash,
        jQuerytarget = jQuery(target);

        jQuery('html, body').stop().animate({
            'scrollTop': jQuerytarget.offset().top + 2
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
}

    });
});

Hope this helps.

[Author]

Posts