Broken Offset with sticky header

  • Resolved scoutx79

    (@scoutx79)


    6 years, 3 months ago

    I have to excuse myself, because i have already emailed you via contact form some days ago.

    I think, it could be an interesting topic for all users and we don’t have a totally private conversation.
    I have created this page https://coaching-impulswerk.de for a friend of mine.

    I use a landing Desktop header and another sticky Desktop header for scrolling.
    The main menu uses anchor links. I’ve corrected the Desktop offset by (latest version):
    h2::before {
    display: block;
    content: ” “;
    margin-top: -125px;
    height: 125px;
    visibility: hidden;
    pointer-events: none;

    —–
    Ive also tried:
    a[ID]:before {
    content:””;
    display:block;
    height:90px;
    margin:0px 0 0;

    and a lot more.

    These Desktop menus are working, but the CSS is not working for the mobile menu.
    I’m pretty sure, all CSS is ignored and if not ignored, the mobile menu breaks (non clickable links e. g.).
    So not to break my links completely, I have created 2 menus with different h2/anchor ids (desktop with h2 CSS vs mobile ids by possible anchor/a CSS.
    Sidenote:
    There is also an interesting bug if i use the actual h2 CSS solution with the mobile menu. On Chrome, offset is not working but I have an orange frame around the landing spot. The orange color is only used by the mobile admin menu.

    Mobile menu: I think the offset is only calculated by the formula within mobmenu.js. And I don’t get it right. It seems to be either this calculation part will be ignored completely or the headerlength is misinterpreted.
    Actually the offset seems to be around 300px or more estimated by latest Chrome.
    There isn’t any option for manually changing the value within the admin panel.
    I’ve tried to edit the mobmenu.js to no avail. Most probably i havn’t found the correct solution. Btw. the js is vanilla again.

    How can i land at the exact spot with anchor links on mobile menu and not breaking my other menus?

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Rui Guerreiro

    (@takanakui)

    Hi @scoutx79,

    Thanks for opening the support topic here.

    I would suggest the same thing I did when I replied to you. Can you turn WP Mobile Menu off to so can have a look where the scroll stops?

    Thanks

    Thread Starter scoutx79

    (@scoutx79)

    Thank you,
    I have deactivated the mobile menu.

    Marc

    Plugin Author Rui Guerreiro

    (@takanakui)

    Thanks. If you notice it also has a margin when I pressed in coaching.
    https://cl.ly/8bf492ae3489

    Another thing I noticed was that the url didn’t changed to the https://coaching-impulswerk.de/#oaching

    Maybe it can also be a conflict from any other plugin or the theme functionalities. Not sure if you have a staging environment where you can try to deactivate all plugins to see what happens.

    Plugin Author Rui Guerreiro

    (@takanakui)

    @scoutx79

    I had another look and not sure what is conflicting but removing a piece of code does the trick.

    Let’s try to remove the code below from the line 178 to the 201 inside the mobmenu.js

       if (target.length) {
          // Only prevent default if animation is actually gonna happen
          event.preventDefault();
          event.stopPropagation();
          $( '.show-nav-left .mobmenu-left-bt').first().click();
          $( '.show-nav-right .mobmenu-right-bt').first().trigger( 'click' );
          $( 'html' ).css( 'overflow', '' );

          $('body, html').animate({
          scrollTop: target.offset().top + 400
          //  scrollTop: target.top 
          }, 1000, function() {
            // Callback after animation
            // Must change focus!
            var $target = $(target);
            $target.focus();
            if ($target.is(":focus")) { // Checking if the target was focused
              return false;
            } else {
              $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
              $target.focus(); // Set focus again
            };
          });
        }

    Will create an option for the next update to disable/enable this smooth scroll feature in WP Mobile Menu.

    Thread Starter scoutx79

    (@scoutx79)

    Thank you,
    so it was the target.length / smooth scroll method.

    This helps alot. I think, i can implement two different offset lenghths now.

    Plugin Author Rui Guerreiro

    (@takanakui)

    That’s great. Happy to help.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Broken Offset with sticky header’ is closed to new replies.