[Resolved] Slide out Menu mysteriously messed up

Home Forums Support [Resolved] Slide out Menu mysteriously messed up

Home Forums Support Slide out Menu mysteriously messed up

Viewing 7 posts - 16 through 22 (of 22 total)
  • Author
    Posts
  • #547958
    Tom
    Lead Developer
    Lead Developer

    Smooth Scroll is still very new to the plugin, but we’ll get more documentation added ASAP.

    For our built in system, you would need to:

    1. Give your Elementor section an ID.

    2. Link to the ID like you would in page scroll to ID. However, you need to give the link this class: smooth-scroll

    So if the link is in HTML, you would do this:

    <a class="smooth-scroll" href="#my-elementor-id">Link to ID</a>

    If it’s a menu item, you can give it the smooth-scroll class like this: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Let me know if this helps or not 🙂

    #550369
    Dinesh

    Unfortunately this did not work.

    This is what I did.

    On Elementor I dragged an anchor element and placed it over the section to where I’d like to scroll and I gave it an id ‘TestID’

    Then I went to Apperanace->Menu

    added a Custom Link to the menu item. below are the inputs I provided to the Custom link parameters

    URL:
    https://mywebsite.com/#TestID

    CSS Classes (optional):
    hide-on-desktop smooth-scroll

    This does not work. it just jumps to the section(not scroll) and that too overshoots the header. does not scroll even though I have enabled smooth scroll in the theme.

    I fail to understand what I’m doing wrong. you can go to my url and click the last link on the header and you will see the result I am getting by following the steps mentioned above.

    #550602
    Tom
    Lead Developer
    Lead Developer

    I’m not seeing that menu item. It looks like you’re still using the scroll to page ID plugin. It’s setting your menu items to current when you click them, which is something the built in smooth scroll doesn’t do.

    How about we try to use the plugin instead? If that’s the case, the only issue is closing the slideout navigation, right?

    #550618
    Dinesh

    The Menu item name was an example. on the actual website the menu item when you can see what I am experiencing is called ‘What Do I Get’? if you click on that you will see what I am experiencing. I tried this by removing all page scroll to id elements and even disabling the plugin but got the same result. I can bet I am not doing something right?

    Did you have a look at the steps I followed in my previous message? would that be accurate? or am I messing something up with the steps? I tried the same steps after disabling page scroll to id plugin and get the same results.

    Also the only reason I used Page scroll to id in the first place was because at that time your theme did not have any in-built scrolling function(something I was hopping would be released soon). in addition to the closing out the slide-out navigation problem. page scroll to id has another problem. I was using BJ lazy load to improve the page load speed but it does not work well with page scroll to id.

    The issue I have when I use the two together is the fact that the images are loaded while the page is scrolling (due to the lazy-load script) and since some of these images do not have a fixed height(I cannot give them all a fixed height), they extend the page/document length after they’re loaded.

    So, when you click a link at the top the page starts scrolling to the target position, but by the time it arrives there, the target’s position has changed because other images have loaded above it.

    Does your theme smooth-scroll function fix this issue? If yes I’d love to use smooth-scroll.

    In short if smooth-scroll can fix the lazy load compatibility issue then I’d really need to use smooth-scroll, if I’d experience the same issues even if I switched to smooth scroll then I’d stick to page scroll to id and hopefully I can get some guidance on how to close out the slide-out menu on mobile. The slide-out menu closes just find on desktop, only mobile is having the issue.

    Regards

    #550963
    Tom
    Lead Developer
    Lead Developer

    Unfortunately I think most smooth scroll scripts would have that lazy load issue. They need to calculate the height of the document before scrolling, so if that height changes while scrolling, you’re going to run into issues.

    Try this script in the wp_footer hook to close the slideout on click:

    <script>
    	jQuery( '.slideout-navigation a' ).on( 'click', function() {
    		if ( /#/.test( this.href ) ) {
    			if ( document.body.classList.contains( 'slide-opened' ) ) {
    				window.offside.factory.closeOpenOffside();
    			}
    		}
    	} );
    </script>
    #551033
    Dinesh

    That worked. thank you so much for being so patient with me.

    Would there be no code fix to ever make a scrolling website function alongside lazy load? would be an absolute winner.

    Once again thank you for being patient and all your assistance.

    Regards

    #551271
    Tom
    Lead Developer
    Lead Developer

    I’ll definitely look into that – sounds like something that will need to be fixed at some point.

    No problem at all – glad I was able to help! 🙂

Viewing 7 posts - 16 through 22 (of 22 total)
  • You must be logged in to reply to this topic.