[Support request] Sticky menu offset.

Home Forums Support Sticky menu offset.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #344612
    Rafał

    Hi Tom.

    I’m having a problem with sticky menu, it doesn’t offset for its height when menu item is linked to an anchor on the same page. So after clicking a button the sticky menu covers beginning of the section that the page got scrolled onto.

    I thought GP Premium offsets it automatically for you.

    Any help please?

    Site: t.inventi.pl

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #344802
    Tom
    Lead Developer
    Lead Developer

    There isn’t a “best practice” way to achieve this, which is why it isn’t in GP.

    There’s this method, which you can place into your wp_footer hook using GP Hooks:

    <script>
    jQuery(function($) {
    	$('li.smooth > a[href*="#"]:not([href="#"]), a.smooth[href*="#"]:not([href="#"])').on( 'click', function(e) {
                    e.preventDefault();
    		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 - 70
    				}, 500);
    			}
    		}
    	});
    });
    </script>

    This would require you to add the smooth class to your menu items: https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Then you would change the 70 value to the height of your navigation.

    #345573
    Rafał

    Thank you Tom, this solves the issue. Well done Tom, really appreciate it.

    Would you mind if without opening new thread I’ll post some more things to discuss please?

    1. Slide-out menu auto collapse. It used to close down after clicking, now for some reason it stopped and stays opened after a button is clicked. Is this because of the above code/class?

    2. White space handling. I’m not sure if this is page builder or the theme’s issue.
    After I updated Elementor to 1.5.x suddenly all &nbsp tags started to show as text instead of space. Can you point me into right direction please (GP/Elementor?)

    3. Overlapping colums in mobile view. I cannot find the culprit why one column overlaps another. When you navigate to “Zespół” section in mobile view one column overlap another. There’s no padding/margin added and all looks OK in my page builder, but when viewed on mobile or simulation of mobile view in CHrome these two columns don’t look right.

    Many thanks for any help with these.

    Best.
    Rafal.

    #345944
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    1. I just edited the code above: https://generatepress.com/forums/topic/sticky-menu-offset/#post-344802

    Can you see if it fixes this issue?

    2. I would have to see it, however I’m assuming it’s an Elementor issue.

    3. Since these areas are built using Elementor, you’ll likely need to check with them as GP doesn’t control it.

    #351094
    Rafał

    Tom thank you for your reply and sorry for a long break since you replied.
    It seems that the code provided solved 99% of the issue. Only when you click HOME the menu won’t collapse. Is it fixable?

    #351492
    Tom
    Lead Developer
    Lead Developer

    Is there any way you can link me to the page?

    #351493
    Rafał

    It’s mentioned in the 1st post 🙂
    t.inventi.pl

    #351505
    Tom
    Lead Developer
    Lead Developer

    Interesting, can you try linking to the Home button to #masthead

    #351532
    Rafał

    TY Tom, it collapses now but does not scroll right up, it only bounces up by some 50px (does not bounce on FF mobile, only collapses)

    #351534
    Rafał

    Talking about scrolling, is there a way to slow down auto-scrolling speed or is it browser’s native behaviour?

    #351832
    Tom
    Lead Developer
    Lead Developer

    Try adding this into the Before Header hook in GP Hooks: <a name="top"></a>

    Then link it to #top.

    Adjust the 500 value in the code to something higher to slow it down.

    #395283
    Max

    Tom

    I used the JS at the top of this thread. It seems it only works for a one page site??

    Works perfectly on my homepage. But does not work if I am on another page of my site and click on the menu link associated with an anchor on my home page.

    Is there a solution for this?

    Kind Regards

    Max

    #395413
    Tom
    Lead Developer
    Lead Developer

    Yes, that code is only for one page websites.

    Not sure it’s possible to do this for other pages, but I’ll look into it.

    #395632
    Max

    It is possible. Because the Scroll on Id plugin achieves it. However, I would much rather a simple JS snippet solution like your SMOOTH code that I can just add to my functionality plugin and keep my plugin bloat down.

    #395657
    Tom
    Lead Developer
    Lead Developer

    Probably best to use the plugin in that case – the solution likely wouldn’t be as simple as the other code.

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