As for the nav, I wanted the hamburger to open a full screen nav menu. I made a modal for that and had the interaction on the hamburger menu also effect the modal.
However, when you click to open the modal/full screen nav, the modal opens but the links aren’t clickable. And oddly, you can click anywhere to “close” the hamburger menu, but the modal is still open (only if you click on the hamburger does the modal close). However, if you do click elsewhere on the screen to “close” the hamburger menu but not the modal, then after that, the links on the modal ARE clickable - but the hamburger/X on the menu is then out of sorts with the open/close state of the modal (modal is open but hamburger is 3 lines and not an x).
I’m not sure I explained this correctly, but if you go to the site and give it a try, you’ll see what I mean…
Can you help? Is there an easier way to make this type of full-screen nav that I’m not aware of?
It looks as though you’ve managed to fix this problem? Your links appear to be working.
I’m having the same issue. I’m using an absolute full div, with no visibility, and am using a hamburger icon with an interaction that allows the full screen menu to pop up.
The trouble is, this makes the links underneath the div unclickable. When I play with the z-index, the full div then shows up behind my main page.
I’ve been playing about with it for hours, to no avail. Any tips would be GRAND!
You are the first person to respond to something I posted in the forum! cool
Yes, I did get it to work. You can still see the one that wasn’t working. It’s on the page “old home”. On that one, I used the pre-made “navbar” and tried to customize it. I did that because that’s what I saw in all the custom hamburger navs in showcase pages (there’s a great one by Waldo that is clonable and has a ton of neat effects). But none of those were a full-screen nav. They were all custom hamburger menus that opened a side nav, or small vertical nav, or something like that. Apparently, there is something about a full-screen overlay that I was missing…
To fix my issue (as you can see is fixed on the current home page), I did away with using the pre-made navbar altogether. I just made my own nav hamburger menu using a div block (and div blocks inside for the lines). The interaction is then on that main div (called “making a nav”), but it is all “click” triggers.
Does that make sense?
As you and I experienced, when you try to do this using the navbar, there is something about the z-index that make the links underneath unclickable initially. I did try playing the the z-index values as well, but couldn’t get that to work (it would solve some problems but create others). I don’t know why, but I believe it has something to do with a layer of the navbar or the fact that the custom hamburger menu then has both “navbar” and “click” trigger interactions. I couldn’t figure out the cause, but obviously something was making it do that. By making your own “navbar” as a div, you eliminate that issue because all that other custom formatting that comes with the pre-made navbar is gone.
I don’t know if the “navbar” has any significance in the code/how the page is read, but I don’t think so. I think essentially, they “navbar” is a div that just comes pre-stylized by Webflow for you, to speed up some of the work. At least, that’s what I’m hoping.
