Jump to content
Jason

Meganav sticky scroll problem

Recommended Posts

Jason

Hi.

 

I am having an issue with meganav. If meganav is sticky on scroll when browsing in chrome, the menu jumps up and down from the top of the page.

If you use the mouse scroll wheel or down arrow on the scroll bar the page will infinitely bounce the menu up and down with out actually moving down the page.

the only way to get the page to move down is to resize the page or move the bar in the scroll bar down.

I do realize that meganav does say sticky on scroll does cause some issues but is there any way round this?

(This issue doesn't seem to affect firefox)

 Also pages slowly auto scroll up or down.

 

Site in local development but you can see the same behavior on www.iheartpagelines.com

 

Edited by Jason (see edit history)

Share this post


Link to post
Share on other sites
Jason

Ok. I don't think you have to worry it just seems to be my browser?

I tried on another machine and all is fine. So not sure what is going on. Cleared cache shutdown machine, disabled plugin but no changes.

Oh well

Share this post


Link to post
Share on other sites
Andrew

Hey @Jason try out the new NavPro, we have a lot of steller reviews about that one. Not sure the issue you're seeing with Meganav

Share this post


Link to post
Share on other sites
Jason

Hi @Andrew

I Just want to confirm the following bug in MegaNav with the weird bouncing behaviour as described above. (I have had 2 clients confirm the 2 behaviours, page bouncing and random scrolling)

The bug doesn't appear on every page load but I had seen this in both meganav and navpro when making menu sticky on scroll. (Not sure if new navpro update fixes it.)

This bug is caused by adjusting the font size in the builder. Leave font at 100% no problems. Change font to 120% issue starts.

If you change the font size using css then no problem. So bug appears builder related.

 

Not sure why this happened but using css rather than builder to change font size fixes the issue.

Edited by Jason (see edit history)

Share this post


Link to post
Share on other sites
Jason

Man this is doing my head in.

So the bouncing bug appeared again. It seems less frequent when font sized changed by css.

It happened every 30 or so page loads. Not sure what I am doing. (Have gone through usual steps disabled plugins, removed all css etc. But only every happens when I make a nav sticky and increase font size.) 

 

Ok tested again.

 

Bouncing bug happens when I set font size in builder to 120%

Set it to 140% and everything seems fine?

Share this post


Link to post
Share on other sites
claudedagenais

Same here

Strangely enough I played with the padding and was able to correct it: If the padding is 0.5 it would bounce, if it is at 0.55 it doesn't bounce!

And although I like NavPro, since it is always on top it doesn't work for the site I'm working on because I want a section before the menu that will fill the screen and the roll to see the menu that will eventually stick to the top.

Edited by claudedagenais (see edit history)

Share this post


Link to post
Share on other sites
Jason

Hi @claudedagenais

What have you got your site wide padding set at?

Your fix didn't work for me but it definitely seems to be a padding issue.

I set mine to 0.2 and that stopped the bounce.

Thanks for the tip.

Share this post


Link to post
Share on other sites
Jason

@Andrew

When the bouncing is happening I can see in inspector an additional div is added after the section.

Not bouncing

<section id="meganav_uaslvcy" 
         class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-meganav main-menu sticky-loaded js-loaded is_stuck" 
         data-object="PL_MegaNav" data-clone="uaslvcy" data-level="0" style="position: fixed; top: 0px; width: 1519px;">

Bouncing

<section id="meganav_uaslvcy" 
         class="pl-sn pl-col-sm-12 pl-col-sm-offset-0 pl-sn-meganav main-menu sticky-loaded js-loaded is_stuck" 
         data-object="PL_MegaNav" 
         data-clone="uaslvcy" 
         data-level="0" 
         style="position: fixed; top: 0px; width: 1519px;">
</section>

<div style="position: relative; width: 1519px; height: 87px; display: block; vertical-align: basline; float: none;">
</div>

Any ideas?

Share this post


Link to post
Share on other sites
sander.vinberg

Hi there, I am having a similar issue. I am developing a site with two sticky meganav menus at the top, one for main nav and one for ancillary nav, and at a single specific window size, I have scrolling anomalies that are a dealbreaker from a usability standpoint. I tried changing padding on the menu overall, and tried changing text size, with no luck. Anyone know of a specific, definitive fix?

Thanks

Sander

Share this post


Link to post
Share on other sites
edgarcheverier

Hi! can you put your link please? I just activated two megaNav just like you on LocalHost and it works without problems,  also if you can show me a screenshot will be great, thank you. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • mtaus
      By mtaus+
      I'm using MegaNav on this site and the menu items and logo are "sticky" (which I selected), but the background scrolls. 

    • abeedle
      By abeedle+
      It appears that within the default settings for MegaNav menu items are slightly opaque when they are not selected or hovered over. Then on the selected page and on hover of the menu item opacity goes to 1. It's not a big deal in most cases but we are including a button on a client's menu and the white text just doesn't stand out as well unless you are on the page itself and the opacity has changed to 1.
      My question is whether there is a way to essentially flip the default settings so that when a menu item is not selected/hovered over the opacity is 1 and when the page is selected/on hover the opacity is slightly less than 1.
      I assume the fix would be by using custom CSS and we have tried a few different methods of attempting to target the menu opacity without success.
      Any help would be greatly appreciated! Thanks!
    • oseehys
      By oseehys+
      Hi @raylonet @Aires Dagraca A. Hey Guys, if i can fix this i wont be here, please help out here.
      I am trying to align some of my menu Items to the right, as it is on Pagelines website, Pagelines is using Navpro, i am aware.
      But i am using Meganav and UberMenu, because it naturally synchronize with Ubermenu, NavPro doesnt.
      How can i align my menus to the right and leave the primary menu at center, see images

    • dwpoyner
      By dwpoyner+
      Not sure exactly what is causing the issue. For some reason, why you view my site on mobile, the menu does not show up. It will pop up, but it is black. You can check it out here: http://dev.caryfbc.org. I'm also attaching a screenshot where I shrunk my browser down. Any suggestions?

    • reklov79
      By reklov79+
      Hi,
      Meganav seems to have a bug if you upload a Logo with a higher resolution (which actually is useful as it looks then sharper on mobile phones). But on mobile the Logo is then larger than on a desktop. Problem is the following code in the meganav style.css. Simply the "height: auto !important" needs to be removed.
      @media (max-width: 480px) { style.css?ver=5.0.14:133 body .meganav-logo img{ height: auto !important; } } But how to achieve that? What is the standard method for customizing that? Overriding via CSS / LESS doesn't work - in this case especially because of the !important derictive used in the original CSS I believe.
      Changing the original CSS is something I don't want to do as it leads into issues when upgrading.
      Btw: I seem not to be the only one with that issue - anyhow, the solution here (not displaying the Logo on mobile) is not acceptable for me.
      Thanks,
      Volker
       
×