Issues with Nav Drop Down in mobile

[DanUK1 (Dan)]

Hi

I’ve attached a read only link below.

1. Please look at the nav drop down menu in the mobile version. In edit mode, hovering over the nav links results in the links moving up and down and flickering, when the hover states are exactly the same as the non-hover states. This also happens sometimes in preview mode, with white lines appearing between the links.

2. Additionally, I don’t know why but in preview mode on mobile (and actually on mobiles) the drop down menu starts further down the page, as opposed to the top of the page. It appears correct in edit mode. Note that I have a Fixed Nav and a ‘Header’ Nav (due to nav appearing on scroll in PC mode). The Header Nav is the visible one for the tablet and mobile versions.

3. For mobile, the ‘menu fills page height’ box is checked, but it doesn’t fill page height when actually looking on a mobile phone. Or am I misinterpreting the meaning of ‘page’?

4. On the home page in preview mode the slider nav always appears in front of the Open Menu Nav. How do I rectify this?

https://preview.webflow.com/preview/wedesignlondon?preview=8e29341490a345601b49a3e9aa54c191

Hopefully someone can help with these Nav issues.

Many thanks,

Dan

[DanUK1 (Dan)]

HI - is anyone able to help me out here? Dave?

@cyberdave

[cyberdave (Dave Sloane)]

Hi @DanUK1, thanks and sorry for the late reply. Sure, I will take a look at this and come back with comments Cheers, Dave

[DanUK1 (Dan)]

Thanks - looking forward to your response!

[thewonglv (William Wong)]

Hi @DanUK1, I took a peek at your site and for your question #1, it looks like your nav link current hover selector has a changed line-height value. (see attachment) Try clicking removing the style by clicking on the blue link.

Hope this helps

[DanUK1 (Dan)]

Thanks @thewonglv That has cleared up the first issue for mobile portrait, but the same issue is now occurring on mobile landscape. I have checked it is not the same reason as you have kindly mentioned and it isn’t…so care to take another look? Thanks

Any update on the other issues? @cyberdave

[cyberdave (Dave Sloane)]

Hi @DanUK1, thanks for your followup, I actually have been looking at this today, but have not completed yet looking at this. The ‘menu fills page’ option is only available for over right or over left actions for the drop down menu.

As soon as I have some additional info, I let you know Cheers, Dave

[DanUK1 (Dan)]

Thanks @cyberdave

I’ve actually rectified the issues for mobile portrait @thewonglv…somehow!

I’ve noticed that for some reason and I guess I would just put it down to a bug, often an element could look different to what the style panel says it is. So for example you may want a Div to have a width of 100FX and in the style panel it says it has a width of 100FX but it actually looks like it has only has a width of 20FX. If you click the width up to 101 and back to 100 then the width of the element adjusts on screen to correct itself to straight away have a width of 100! … Have you encountered this?

This was part of the issue for the above problem, Will.

[cyberdave (Dave Sloane)]

Hi @DanUK1, I think one thing that will help, is if you restrict the visibility of the two menus, on the displays where they should be shown. Set the Fixed navbar to only show on Desktop, and the header1 element to only show on mobile views. See my video. Can you apply that setting change, then check your issue list again and let me know, what issues persist from that list.

http://quick.as/W4rnigbnp

Cheerios, Dave

[DanUK1 (Dan)]

Hi @cyberdave ,

Thanks for the response and the vid!

However, it hasn’t corrected the issue. In Desktop mode, both Fixed Navbar and Header1 are required as there is a Nav on Scroll element and if you look at your video when you go into preview mode you can see the main menu at the top has disappeared in desktop mode.

However, the key issue is that we can still see in the mobile versions (it’s fine in tablet) in preview mode a gap between the top of the phone view (landscape and portrait) and the top of the drop down menu, which is not what I want. There is no gap in the editor mode. If you look at my original post, the first pic is in editor mode (correct) and the second pic in preview mode (gap!).

Also the Slide Nav (the dots) can still be seen and clicked when the Nav Bar is open on tablet and mobile versions (it appears to be in front of the Nav Bar, not behind it).

Hopefully I can get this fixed as these issues are really the only ones left before I launch the site properly!

Thanks again…and I look forward to your next instalment!!

Dan

[cyberdave (Dave Sloane)]

Hi @DanUK1, thanks for clarifying how your design is working, that is fine to keep those elements with their current visibility, that was mainly a cleanup suggestion. Regarding the menu, At the moment, that is the default behavior for the navbar drop down type, the mobile navmenu opens under the mobile icon element. It is built in to the widget that way.

There are a couple of other menu types, Over Right and Over Left that you can also try, that do something more similar to I think what you are looking for.

On the slider issue, select your Slider element and set the position to relative, and set the z-index to 0. This will force the slider elements below the nav’s.

I hope this helps, try that and see if you the Over Right or Over Left menu types work for you.

Cheers, Dave

[DanUK1 (Dan)]

Thanks for your help @cyberdave!