- This topic has 15 replies, 3 voices, and was last updated 6 years, 11 months ago by
Tom.
-
AuthorPosts
-
July 5, 2017 at 11:35 am #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
July 5, 2017 at 8:05 pm #344802Tom
Lead DeveloperLead DeveloperThere 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-classesThen you would change the
70
value to the height of your navigation.July 7, 2017 at 7:01 am #345573Rafał
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   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.July 8, 2017 at 12:46 am #345944Tom
Lead DeveloperLead DeveloperHi 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.
July 18, 2017 at 3:41 am #351094Rafał
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?July 19, 2017 at 12:22 am #351492Tom
Lead DeveloperLead DeveloperIs there any way you can link me to the page?
July 19, 2017 at 12:24 am #351493Rafał
It’s mentioned in the 1st post 🙂
t.inventi.plJuly 19, 2017 at 12:46 am #351505Tom
Lead DeveloperLead DeveloperInteresting, can you try linking to the Home button to
#masthead
July 19, 2017 at 1:34 am #351532Rafał
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)
July 19, 2017 at 1:38 am #351534Rafał
Talking about scrolling, is there a way to slow down auto-scrolling speed or is it browser’s native behaviour?
July 19, 2017 at 11:56 am #351832Tom
Lead DeveloperLead DeveloperTry 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.
October 1, 2017 at 7:41 am #395283Max
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
October 1, 2017 at 9:50 am #395413Tom
Lead DeveloperLead DeveloperYes, 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.
October 1, 2017 at 7:49 pm #395632Max
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.
October 1, 2017 at 9:14 pm #395657Tom
Lead DeveloperLead DeveloperProbably best to use the plugin in that case – the solution likely wouldn’t be as simple as the other code.
-
AuthorPosts
- You must be logged in to reply to this topic.