Hello, I’m fairly new to Builder and need some help. I have a menu button that when in tablet or mobile view, it holds all the nav bar items.
When I get into tablet or mobile view, the menu automatically reveals the nav bar items without me clicking on it first (should not be doing that), but it also doesn’t allow me to close it when clicked on. Below is a screenshot of the coding for the Menu button and the nav bar links it contains. Not sure what I’m doing wrong that’s causing it to not work.
Menu Button - Element Events and Element Data Bindings
Also, the nav bar items are hiding behind the hero. How do I make it move the hero down to reveal the menu items and then move the hero back up when the menu button is clicked to close the items?
I was able to get the menu to hide on click by assigning state.display on the Links child element inside Right container to the isMenuOpen state you created:
With respect to the menu items appearing behind other elements. I believe changing the z-axis would be sufficient enough to have the links come to the front.
To prevent the menu items from showing up automatically when decreasing the viewport size, I changed the condition from “Hide If” to “Show If” in your Element Data Bindings section:
Let me know if there’s anything else I can address, or if the solutions provided can be improved upon for your use case.
Thanks Julius! I noticed the menu items were not showing up on desktop view with the “Show if” so i switched it back to “Hide if”. Not sure if there’s another way around this. I was able to apply z-index property to get the menu items to show up on top of the hero element.
I do have one more thing I’m still stuck on. I was able to add an X button on the initial registration form template and am able to get it to work there, but it doesn’t work on the page models. I’m not sure if there’s a step I’m missing, but if you can take a look at it and let me know, I would really appreciate it. This is the code I have for it so far.
I think the best solution would be a small change in structure. If you take the Menu button out of the Links element, the display properties/visibility of the Menu button wont also be tied to the same mechanisms that hide/show your menu items.
Or perhaps not using the same state to show hide the menu items to show/hide the menu button.
