Jump to content
mtaus

[Solved] MegaNav: Sticky Menu items, but background scrolls

Recommended Posts

mtaus

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

MegaNav.png

Edited by mtaus (see edit history)

Share this post


Link to post
Share on other sites
edgarcheverier

Hi,

I've tried it on Chrome, Safari and on my mobile browser, seems that is working properly: https://cl.ly/2M0s22062c0p

Share this post


Link to post
Share on other sites
mtaus
On 1/13/2018 at 1:41 AM, edgarcheverier said:

Hi,

I've tried it on Chrome, Safari and on my mobile browser, seems that is working properly: https://cl.ly/2M0s22062c0p

It wasn't in Sticky mode which is why it looked right. I just set it back to sticky so you can see the bug.

Any suggestions are welcome. Thanks!

Share this post


Link to post
Share on other sites
mtaus

Just switched to NavPro, which seems to be working.

 

Share this post


Link to post
Share on other sites
edgarcheverier

ok, that's great, probably with MegaNav you are having a few CSS problems. 

If you have any issue with Navpro, let me know. 

Share this post


Link to post
Share on other sites
mtaus

@edgarcheverier NavPro works great on Chrome, but it's misbehaving in Safari. When it loads there is a white area that covers the NavPro menu... as you scroll down it slides up. Screenshot attached.

NavPro-Safari.png

Share this post


Link to post
Share on other sites
edgarcheverier

Hi,

Yes, these two parallax images are going over the  Navpro:

http://staging.citroncatering.com/wp-content/uploads/2013/08/cropped-img-4.jpg

http://staging.citroncatering.com/wp-content/uploads/2017/10/GravlaxFetaFlatbread.jpg

You can put the Navpro in absolute position, but I do not recommend it, or change the size of the images.

Share this post


Link to post
Share on other sites
mtaus

@edgarcheverier I'm not sure I understand... you're saying this is a known issue that the devs will not fix?

Is it possible to set the Z-index for NavPro so it is above whatever is blocking?

Share this post


Link to post
Share on other sites
edgarcheverier

Hi,

The NavPor have a z-index of 10 and the images a z-index of -100 so is not a problem of with the z-index.

I'm waiting for the response from the developers.

 

 

Share this post


Link to post
Share on other sites
edgarcheverier

add this to your LESS/CSS editor:
body.home.page-template.page-template-template-splash.page-template-template-splash-php.page.page-id-851.pl-scheme-default.pl-framework.logged-out.pl-platform.plv-pro{
top: 0;
}

seems that something maybe a plugin is adding inline style to the body tag.

Share this post


Link to post
Share on other sites
mtaus

@edgarcheverier add that CSS but it's not helped. Like I said, no plugins but PL.

Share this post


Link to post
Share on other sites
edgarcheverier

ok lets try this one:

body.home.page-template.page-template-template-splash.page-template-template-splash-php.page.page-id-851.pl-scheme-default.pl-framework.logged-out.pl-platform.plv-pro{

top: 15px !important;

}

Share this post


Link to post
Share on other sites
mtaus

Worked! 

Hopefully the dev team can merge this in.

Thanks @edgarcheverier!

  • Like 1

Share this post


Link to post
Share on other sites
edgarcheverier

Great! I'm glad that is working now! 

I forgot that the inline style is over the CSS editor lol.
 

Share this post


Link to post
Share on other sites
mtaus

@edgarcheverier I'm getting the same issue with the MegaNav background not remaining sticky here:

 http://www.centralserviceinc.com.php7-35.lan3-1.websitetestlink.com/

I've added this CSS but it's not working: 

body.home.page-template.page-template-template-splash.page-template-template-splash-php.page.page-id-851.pl-scheme-default.pl-framework.logged-out.pl-platform.plv-pro{

top: 15px !important;

}

Share this post


Link to post
Share on other sites
edgarcheverier

Hi,

I tested your website on Chrome, Safari, and Firefox and It's working perfectly.

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

    • glyph.marketing
      By glyph.marketing+
      Hello, I am having a problem similar to that experienced by Michael Kummer here. We have pages that show this automatic scrolling issue (examples here and here) and it is sufficiently annoying that we have seen customers bounce while trying to convert. Strangely, it only happens at specific resolutions, so it can be difficult to reproduce. In general we can only consistently reproduce it on a 4k resolution with a browser width between 1517 and 1536px. 
      Thanks to Michael Kummer's help we were able to set the overflow-anchor property to none in the entire body, which fixed the issue as far as we can tell, but also obviously disabled scroll anchoring for the whole site. I tried applying it to the specific element that looked like it was being reloaded, which was the PL Meganav extension, but that was unsuccessful. 
      Can anyone help us figure out which element or ID we can apply this property to, so that we can fix the scrolling issue but not disable scroll anchoring for the entire site?
      Thank you - 
      Glyph Language Services
    • 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?

    • Jarek
      By Jarek+
      How to make the Impulse menu sticky?
      Here is a site that seems like it is doing just that: http://www.manhattanperiodontist.com/
      Here is the site I am working on: http://boeriu.digitalvector.com/ 
      I have no problem showing the menu at the bottom, but when scrolling up it does not stick.  I tried to add Nav Pro menu but when I do that, it just shows on top and no matter what I try is not working as I want it to.
      Any suggestions?
×