Streaming live at 10am (PST)

Mobile menu hide/show issue

Hello, I’ve just started building a responsive navigation. I am having an issue with the hiding/showing of the nav menu on mobile. It works, i.e. clicking menu button hides and closes it, but once it is closed on mobile and you then go up to the desktop breakpoint, it stays hidden. I want the menu to reappear on desktop once you resize the browser. Otherwise this could have implications say on tablet, if you re-orientate the device the menu wouldn’t be visible!

The reason I am not using the stock webflow nav, is because I want a fullscreen one with complete control of how it animates etc.

Link is here (it looks messy at the moment because it’s unfinished, I’m really just looking to solve this browser resizing issue)

https://preview.webflow.com/preview/fisheries-playground?utm_medium=preview_link&utm_source=designer&utm_content=fisheries-playground&preview=54ddedf1b82726f4b153ac7229e12c25&pageId=5f3d4ff027d6afafe57c770b&mode=preview

edit I think perhaps using javascript to detect the window has been resized and to set the mobile menu div to display none is the way forward? If so anyone know what that would look like?

Thanks
Brad

Hi @Brad_Leeming so I had a look at your website… it a little convoluted but just to make sure I understand, you want to have a desktop menu always visible and a mobile menu with a hamburger open/close. if thats the case is very simple you the parent div for the desktop menu should only be visible on the desktop breakpoint while the parent div of the mobile should only be visible on the tablet and mobile (landscape and portrait) breakpoints…

To achieve that you select the desktop nav div and go to desktop breakpoint (press 1 on keyboard) and make it visible. then go to other breakpoints (2, 3, 4 on keyboard) and make sure that at those ones the div is hidden. Do the reverse for the mobile nav div…

Hi @IVG - sorry I realise this probably doesn’t make sense because when I visit the share link above the close button on tablet/mobile doesn’t work. If you click the eye in the top left and then click it again it will work (not sure why).

…Now you may be able to see my issue more clearly. I have created a desktop navigation which responds down to a full screen menu on mobile. Clicking the menu button on mobile toggles the visibility of that menu. I understand about setting it visible / display none.

If you close the menu on preview (it sets menu to invisble). Now if you go up a breakpoint to desktop, you will see the nav is still invisible. This is the issue. Should always be visible on desktop breakpoints. I don’t want people to resize the browser and then lose the whole navigation.

Hope this makes more sense.

Thanks,
Brad

Brad, I get what you are saying but you overcomplicate things… Sorry I did not explain it clearly enough… you have interactions that show/hide menu and mobile menu on load and on click… and that creates a conflict somewhere… BUT, you do not need any interactions to do that - all you have to do is set the visibility settings of the parent divs at each breakpoint… the switching will be done automatically without any interactions… so what I suggest is first remove all the interactions from both the menu and mobile menu, set the correct visibility properties at each breakpoint, and then start adding interactions… (but add both open and close interactions for the mobile nav)

Please let me know if I explained it clearly enough - otherwise I can try and make a little video on how it should be done… (unless I still misunderstand what you want to achieve)

Hi. Yea I think you may be misunderstanding me. Because I have done that, my links on the primary nav are within a div called .menu. This is visible on desktop, on mobile it is hidden. The menu button on mobile has an interaction, which sets the visibility of .menu to visible, thus opening the menu. The whole of .menu has been styled to be a fullscreen menu on mobile devices. This is all working nicely. But when you click close, it sets .menu to hidden… again good this is working. Now… if I resize the browser / change the viewports at the top (after closing the menu on mobile) you will see .menu is still hidden. Because the visibility of that div has been overridden by the interaction.

The page load interaction I added was my attempt to solve this issue. I have removed it now but the problem persists.

I don’t want to have a seperate div with my mobile menu in it, as I would be duplicating links in two places and that seems bad practice.

Does this make more sense?

Thanks for helping so far!

you have the behavior that you see because on when you click “close” on the menu, it makes it hidden… and I think u were trying to fix it by having an “on load” interaction with “show” - but changing breakpoints is not reloading the page… so its not helping…

As for having separate mobile and desktop nav’s - its common practice as far as I am aware…

so consider the following:

you can achieve what you want with jquery - that the menu nav will become hidden/visible on viewport change (see this link), but this is far to complicated for a nav.

also the menu/close button is the same one - so you should create an interaction/animation that will change the button on first click and on second click… this way it will work better.

I can’t see a way, without custom code, to do what you want without duplicating the menu div - but like I said that is going to take some doing since you will have to write either some custom media queries, to trigger at different points or custom js or jquery to trigger on resize…

you can also add the nav element from the “components” menu and then style it… but if you want to build your own…

I think you’re probably right about overcomplicating it. I had it in my head that building navigation that wasn’t fully responsive and had a mobile only menu was bad. This would be far easier if i just have a mobile specific menu. Thanks for your help!