Trouble with slide out mobile navigation

Public link is here. As you can see, the contact form is in the footer section of each page. When you look at the mobile view, there is a fixed navbar at the top of the screen. If you scroll down, the nav stays fixed and visible. When you click the hamburger to open the off canvas links block then click the contact link, the menu closes and the page scrolls to the contact form but the fixed navbar is no longer fixed. Is this a bug or am I doing something wrong? Thanks.

@Aksaunders that’s a neat design, nice work!

You’re getting the issue because you have everything inside a relative parent, so the nav-menu is set to fixed position within it’s relative parent rather than within the Body element.

So if you move both the mobile nav and the side nav element outside of your “animsition” element like this:

Then set your sidebar nav to sit underneath your other elements by giving it a z-index of 0, and give your “animsition” element a z-index higher than that, say 2. Maybe give your sidebar navigation some top padding, like 100 px.

Then it should work correctly:

Please let me know if you have any questions, keep up the great work! That’s a neat navigation :smiley:

Thanks so much for the assist. I love your work here by the way. I am waiting for the right site to use your Sharing Is Caring project.

1 Like

​It’s my pleasure to help @Aksaunders, please feel free to reach out anytime if you have any questions, I’m here to help :smiley:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.